Solved

Same Browser, Different Display?

Posted on 2009-06-30
25
906 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
Comment Utility
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
Comment Utility
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:renazonse
Comment Utility
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
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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:renazonse
Comment Utility
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:renazonse
Comment Utility
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
Comment Utility
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
Comment Utility
Oops, I meant ie8, not Vista, My bad. Long day.
0
 
LVL 17

Author Comment

by:OmniUnlimited
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 17

Author Comment

by:OmniUnlimited
Comment Utility
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:renazonse
Comment Utility
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
Comment Utility
renazonse, wow, thank you very much.  That is great information.  Now about this problem using the same browser?
0
 
LVL 30

Expert Comment

by:renazonse
Comment Utility
@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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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:renazonse
Comment Utility
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
Comment Utility
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:
renazonse earned 450 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now