Same Browser, Different Display?

Can anyone tell me why the very same page would display differently in the same browser on two different machines?  I went over to a friends house and wanted to show him how my website was coming (www.sleepamazing.com) and the text overflowed the boundaries of the rounded corner divs.  He is using Windows Vista with IE8.  I use Windows XP with IE8 and the text displays fine not only in IE8, but Firefox 3.0 and Safari 4.0 as well.  How can I ensure that the text will not overflow boundaries regardless of what browser, operating system or machine that is used?
LVL 17
OmniUnlimitedAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

s8webCommented:
Microsoft in their infinite (cough) wisdom came up with "standards mode" and " ie7 "compatibility mode". Ironically, neither seems to be either.

http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

I would recommend Firefox, Opera, Chrome, Safari, or any other browser that doesn't, well you know.
0
OmniUnlimitedAuthor Commented:
Thanks for the input s8web, but I can switch between modes on my machine and the display remains basically the same.  I don't understand the difference on my friend's display and mine, and what could be causing it, nor how to fix it since I only have my machine on which to do my website development.  Any clues would be helpful.
0
Britt ThompsonSr. Systems EngineerCommented:
You can force the browser into compatibility mode: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

there's a chance he's changed his text size or adjusted the fonts the browser uses causing it to render differently but you can also generate separate stylesheets for IE to ensure it never happens if you don't want to force IE7 compat mode.

in your header add this around your css file link (where lte is less than or equal to):

<!--[if lte IE 6]>

<style>

</style>

<![endif]-->
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

s8webCommented:
Are you absolutely sure that you are viewing the page with the same build of ie8? Are you both receiving updates? Is one version an old beta ie8? Just brainstorming here.
0
OmniUnlimitedAuthor Commented:
renazonse, that sounds like it has possibilities.  How do I supercede user settings (and I would ask this for every browser out there), bringing them back to default, then customizing them with my own styles?
0
OmniUnlimitedAuthor Commented:
s8web, no I can't be sure that they are of the same build.  But my question would go to be able to display the page well regardless of the build, make or model of the browser.
0
s8webCommented:
I agree, but if you or your friend is using a beta version of ie8 you can't expect things to be rendered properly. I would count that possibility out if you can, ie8 hasn't been out that long.
0
Britt ThompsonSr. Systems EngineerCommented:
Here's some examples...just add these lines below your regular CSS link <link href="ie.css" rel="stylesheet" type="text/css" />. Then, the browser loads them in order from top to bottom overwriting as styles are different in each stylesheet matched in the conditional statment.

<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 8]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->

not exactly sure what your question is otherwise...unless you mean set their browser settings to defaults, which you cannot do. It's to the user's detriment to change the default browser settings since it'll jam up a great deal of websites.
0
Britt ThompsonSr. Systems EngineerCommented:
My Vista machine renders it correctly in IE8...FYI

He may have assigned his own stylesheet to the browser. I adjusted the zoom and text size and it still looked fine.
0
s8webCommented:
I just did a fresh install of Vista on a machine on the bench here, and sleepamazing.com renders properly on it as well. Version: 8.0.6001.18702
0
s8webCommented:
Oops, I meant ie8, not Vista, My bad. Long day.
0
OmniUnlimitedAuthor Commented:
renazonse, thank you very much.  That information is very helpful.  My only dilema is that as I stated earlier, the display is different for the same browser on two different machines.  How do I set up for just such a contingency, and is there a way to avoid having to basically duplicate a whole css file with only some minor changes for browser differences?

s8web, thank you.  I appreciate your comment.
0
OmniUnlimitedAuthor Commented:
s8web, thank you.  That is just where my frustration is, this is the first instance that I have seen where my webpage has problems with its display.
0
Britt ThompsonSr. Systems EngineerCommented:
in the ie.css files all you have to add is the styles that need to be different...

original.css may say

#content {
position:relative;
width:700px;
margin:0 auto:
color:#eee
}

and for whatever reason you want a different font color in IE:

original.css may say

#content {
color:#333
}

so that's all you need add...just remember the CSS is loaded from the top of the page to the bottom.
0
OmniUnlimitedAuthor Commented:
renazonse, wow, thank you very much.  That is great information.  Now about this problem using the same browser?
0
Britt ThompsonSr. Systems EngineerCommented:
@Now about this problem using the same browser?

Not sure what you're referring to here.
0
s8webCommented:
All indications point to your friends computer. My best guess is a beta version of ie8. Confirm this before you try any more troubleshooting.  It is the most logical explanation. If you cannot verify your friend has a proper install of ie8 on the machine in question, you cannot successfully continue any logical troubleshooting.
0
OmniUnlimitedAuthor Commented:
s8web, hmm, thanks.  It may be a little bit before I can get back over there again.  Sorry for the delay.
0
OmniUnlimitedAuthor Commented:
Hi guys, sorry it took so long to get back with you.  I hope you all are still with me.  I got the information from my friend, and it appears his version of the browser is almost exactly the same as mine (his is version 8.0.6001.18783, while mine is 8.0.6001.18702), but in checking around his browser settings, we discovered that the difference between the browsers is the "Text Size" setting in the "View" menu.  Mine is set to "Medium" while his is set to "Largest".

I was wondering, is there any way of controling this setting so that all users will see the same display?  Or is there a CSS solution to override the view settings?  Or, is there a way that CSS could respond in readjusting the height of the boxes to accomodate the larger text?

I really appreciate your input on this.  Thanks a million.
0
s8webCommented:
Greetings OmniUnlimited,

I don't think this scenario is something you are going to be able to adjust for. It would be great if I'm wrong, I'll keep monitoring. Best of luck!
0
Britt ThompsonSr. Systems EngineerCommented:
You can't manipulate the browser settings but you can make the container of the content have a dynamic height and a min-height like so:

#category1
{
      min-height: 282px;
      height:auto; !important;
}
0
OmniUnlimitedAuthor Commented:
renazonse, it appears like you may have just offered the solution.  But before I let you go and award points, can you answer a couple of questions for me?  First, do you know for a fact that min-height is supported through all the browsers?  And, second, can you explain to me a little bit about the syntax on height:auto; !important;?  I've never seen the use of the semicolon before the !important;.  Can you explain to me the difference between height:auto; !important; and height:auto !important;?
0
Britt ThompsonSr. Systems EngineerCommented:
min-height is not supported in all browsers...the height:auto; !important; (should actually be "height:auto !important;" minus the extra ";") and it's like that because it resolves the issue with IE6.

Here's how the code should look in the end (it's funky but it's an IE hack...in FF, IE7... all you need is min-height and remove the static height setting):

#category1
{
      min-height: 282px;
      height:auto !important;
      height:282px;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OmniUnlimitedAuthor Commented:
Thanks guys for sticking with me through this. s8web, I award you partial points because you pointed me in the direction that eventually led to the solution.  renazonse, well done!  I appreciate very much all your help.  Once again guys, thanks a million.
0
OmniUnlimitedAuthor Commented:
Just a post-note, guys.  In playing around with different websites where I noticed that the fonts were not affected by the different "Text Size" settings, I found out that if you set font-size to a fixed pixel size then it does not matter what the user settings are, you still get the same display.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.