Solved

Same Browser, Different Display?

Posted on 2009-06-30
25
917 Views
Last Modified: 2013-12-08
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?
0
Comment
Question by:OmniUnlimited
  • 11
  • 7
  • 7
25 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24749624
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24749657
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24749676
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:s8web
ID: 24749704
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24749727
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24749744
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
 
LVL 16

Expert Comment

by:s8web
ID: 24749788
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24749798
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24749824
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
 
LVL 16

Expert Comment

by:s8web
ID: 24749853
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
 
LVL 16

Expert Comment

by:s8web
ID: 24749859
Oops, I meant ie8, not Vista, My bad. Long day.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24749875
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24749896
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24750311
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24751121
renazonse, wow, thank you very much.  That is great information.  Now about this problem using the same browser?
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24753236
@Now about this problem using the same browser?

Not sure what you're referring to here.
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 50 total points
ID: 24753646
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24756022
s8web, hmm, thanks.  It may be a little bit before I can get back over there again.  Sorry for the delay.
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24765703
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
 
LVL 16

Expert Comment

by:s8web
ID: 24766005
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24766094
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24766548
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
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 450 total points
ID: 24766726
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
 
LVL 17

Author Closing Comment

by:OmniUnlimited
ID: 31598533
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
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24787865
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Css regex 6 42
CSS DIV Height in Percent 1 27
HTML question 2 24
.CSS HTML Help 3 23
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question