OmniUnlimited
asked on
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?
ASKER
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.
You can force the browser into compatibility mode: <meta http-equiv="X-UA-Compatibl e" 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]-->
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]-->
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.
ASKER
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?
ASKER
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.
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.
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.
<!--[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.
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.
He may have assigned his own stylesheet to the browser. I adjusted the zoom and text size and it still looked fine.
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
Oops, I meant ie8, not Vista, My bad. Long day.
ASKER
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.
s8web, thank you. I appreciate your comment.
ASKER
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.
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.
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.
ASKER
renazonse, wow, thank you very much. That is great information. Now about this problem using the same browser?
@Now about this problem using the same browser?
Not sure what you're referring to here.
Not sure what you're referring to here.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
s8web, hmm, thanks. It may be a little bit before I can get back over there again. Sorry for the delay.
ASKER
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.
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.
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!
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!
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;
}
#category1
{
min-height: 282px;
height:auto; !important;
}
ASKER
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;?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
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.
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.