Weird CSS problem with IE...

[branwen]

Okay, so I have a div called "thinbar". It is 5px tall. In IE, it shows up taller than that, for some strange reason. Firefox shows it as the 5px I specified. Can anyone see why IE wouldn't be displaying the right height?

Code below...

CSS:
.thinbar { margin: 0px; height: 5px; width: 46.9em;
background-color: #F9E886; border-style: solid;
border-color: #000000; padding: 0px; border-top-width: 0px; border-bottom-width: 1px; border-left-width: 0px;
border-right-width: 0px; }

XHTML:
<div class="thinbar"></div>

Any clues would be much appreciated!!!

 

[JakeA]

A quick fix would be to use IE7 CSS (available from http://dean.edwards.name/IE7/intro/). It ensures that IE follows CSS standards - I have found it very helpful in the past. It does not affect Firefox, Netscape, etc.

 

[danburzo]

This is indeed a weird problem. It's a known fact that IE has poor support for web standards.
Working with the code you provided, i noticed that if you modify the text size in IE (View > Text Size) the browser reshapes the box accordingly. So your problem has to be related to the default settings IE applies to your page.

Try adding this to your style:

font-size: 1;

also, you should write the width of the box in pixels. em measuring unit is also dependent to what the default font of the browser is.

Hope this solves your problem, or at least minimizes the difference in appearence in the two browsers.

 

[branwen]

This is indeed a weird problem. It's a known fact that IE has poor support for web standards.
Working with the code you provided, i noticed that if you modify the text size in IE (View > Text Size) the browser reshapes the box accordingly. So your problem has to be related to the default settings IE applies to your page.

Try adding this to your style:

font-size: 1;

also, you should write the width of the box in pixels. em measuring unit is also dependent to what the default font of the browser is.

Hope this solves your problem, or at least minimizes the difference in appearence in the two browsers.

I set a font size, and it didn't change how the div was showing. I should have set a font size anyways, must have forgot... I'm using ems because I want the divs to stretch if someone changes the font size in Firefox (it doesn't listen to set font size the way IE does...). Gosh I wish I could figure this out. At least figure out how to change it, if not WHY it's doing this in the first place.

Okay. Ugly hack, but I fixed it. I put an empty paragraph inside the div.