Coding for Windows7 vs Windows10

[Lyla]

Hi there!

So I'm having a little problem with things looking differently for different versions of windows.  

I am, for example, working on getting some affiliate info up on my site.  wall.freeforums.net/
At the very bottom of the site it has the 4 different categories to put in the affiliates.  

However, for myself and other Windows 7 users those boxes are centered to the site, but for my members who have windows 10 they are aligned to the right.  What can I do to make it centered for everyone? 


Code in the forum wrapper:


<div class="container">
                   <div class="title-bar"><h2>Affliates</h2></div>
                   <div class="content" style="padding-top:5px;">
                       
<div class='affies2'>
<center><table style="width: 75%;" cellspacing="1" cellpadding="1"><td>

<div class="affies-title2">Sister Sites</div>
<div class="affies-rtd">
<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #ffffff; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>
</div>

<div class="affies-title2">Resources & Directories</div>
<div class="affies-rtd">
<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

</div>

<td><div class="affies-title3">Static</div>
<div class="affies-rtd2">
<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>

<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>
</div>

<div class="affies-title3">Scrolling</div>
<div class="affies-rtd2">
<marquee scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="right">
<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px; margin-bottom: 3px;"></a>
</marquee>

<marquee scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="right">
<a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a><a href="" target="blank"><img src="http://placehold.it/88x31.jpg" style="border: 2px solid #d9ceb2; padding: 2px;"></a>
</marquee>

</div></td></table></center></div>


Code in the style sheet:

/* Shimmer's Affiliation Table */
.affies2 { padding: 0px; }
.affies-title {
background-color: #ffffff;
padding: 10px;
color: #948c75;
font-size: 28px;
font-family: sofia;

text-align: center;
border-top: 15px solid #948c75;
border-bottom: 7px solid #7a6a53; }

.affies-title2 {  background-color: #7a6a53; padding: 3px; color: #ffffff; text-align: center; width: 300px; margin-top: 3px; margin-bottom: 5px; }
.affies-title3 {  background-color: #7a6a53; padding: 3px; color: #ffffff; text-align: center; width: 498px; margin-top: 3px; margin-bottom: 5px; }
.affies-rtd { width: 300px; height: 130px; margin-left: 5px; }
.affies-rtd2 { width: 498px; height: 130px; margin-left: 5px; }

[Joachim]

As a windows 10 user, checking this over in Chrome, they look centred to me, though it may be due to my screen resolution.

But this is what I see:


So perhaps having more information would help somewhat, though I admit I'm no coder, but is this issue for users on Firefox only, on Chrome, on Opera? etc.

[Lyla]

Hmm.. Well I'm glad it looks centered to you! I thought that was the problem, but apparently that wasn't the reason. I know that many people are using Chrome and there is still a difference. One person using windows 7 on chrome and another using windows 10 and chrome and it looks different.

I can't figure it out.

[Kami]

Jul 19, 2017 19:01:08 GMT -8 Lyla said:

Hmm.. Well I'm glad it looks centered to you! I thought that was the problem, but apparently that wasn't the reason. I know that many people are using Chrome and there is still a difference. One person using windows 7 on chrome and another using windows 10 and chrome and it looks different.

I can't figure it out.

There should be no discernible difference between the same browser in two different operating systems (and no other difference), with the exception of if one user has a different version than the other, and the two versions have a difference in the backend that would affect this.

The most likely difference is monitor resolution, as mentioned.

I would suggest finding out:
1. Their monitor resolution
2. The version of chrome each is using.

[Tanya]

I'm using the newest Chrome version on win10 and it is definitely to the right for me. (also keep in mind my monitor is 1400x900)

[Kami]

Seems like it is a resolution issue: I'm on the latest version of Chrome, also on windows 10, at a 1920x1024 resolution and it's definitely centred to me.

Since three people (four if you include the original member) on Windows 10 have reported varying results with the same browser, this eliminates the OS being the culprit (it's just coincidental that two people with different monitor sizes also run different OS versions) and points to monitor resolution. My resolution is significantly larger than Tanya's, and I suspect Joachim's is as well.

From this data I would surmise that your forum is at a fluid width; because of that, using fixed widths (specific pixel amounts) in your affiliates winds up with different displays depending on the size of someone's monitor.

To illustrate: 10 pixels of 90% of a 800px width monitor will take up more overall space on the monitor than 10 pixels of 90% of a 1920px width monitor.

[Lyla]

Jul 19, 2017 21:16:44 GMT -8 Kami said:

Seems like it is a resolution issue: I'm on the latest version of Chrome, also on windows 10, at a 1920x1024 resolution and it's definitely centred to me.

Since three people (four if you include the original member) on Windows 10 have reported varying results with the same browser, this eliminates the OS being the culprit (it's just coincidental that two people with different monitor sizes also run different OS versions) and points to monitor resolution. My resolution is significantly larger than Tanya's, and I suspect Joachim's is as well.

From this data I would surmise that your forum is at a fluid width; because of that, using fixed widths (specific pixel amounts) in your affiliates winds up with different displays depending on the size of someone's monitor.

To illustrate: 10 pixels of 90% of a 800px width monitor will take up more overall space on the monitor than 10 pixels of 90% of a 1920px width monitor.

 Ok, that makes sense! I did change the table width to a percentage but I'll play with some of the other numbers to see if I can't figure it out.  Thanks so much for everyone's help! 

[Kami]

Jul 20, 2017 8:13:02 GMT -8 Lyla said:

Jul 19, 2017 21:16:44 GMT -8 Kami said:

Seems like it is a resolution issue: I'm on the latest version of Chrome, also on windows 10, at a 1920x1024 resolution and it's definitely centred to me.

Since three people (four if you include the original member) on Windows 10 have reported varying results with the same browser, this eliminates the OS being the culprit (it's just coincidental that two people with different monitor sizes also run different OS versions) and points to monitor resolution. My resolution is significantly larger than Tanya's, and I suspect Joachim's is as well.

From this data I would surmise that your forum is at a fluid width; because of that, using fixed widths (specific pixel amounts) in your affiliates winds up with different displays depending on the size of someone's monitor.

To illustrate: 10 pixels of 90% of a 800px width monitor will take up more overall space on the monitor than 10 pixels of 90% of a 1920px width monitor.

 Ok, that makes sense! I did change the table width to a percentage but I'll play with some of the other numbers to see if I can't figure it out.  Thanks so much for everyone's help! 

Any time! :D