How come this relative positioned div is displayed differently in IE?

Question

What is with these microsoft browsers? Does microsoft ever do a good job at anything...

Anyways, I have a relative positioned div inside another div. The inside-div is positioned with percentage (left: 0%; top:13%).

My problem is that in all IE versions the div is displayed some pixels further down than where it is displayed in Chrome, or FF...

Anybody recognize this?

   <div class="nav_container" id="nav_container">
   <div id="nav_container2" style="position: relative; left: 0%; top: 13%;"></div>
   </div>

Also, I am just about to browser adjust my website so some article about most common problems with IE is appreciated.

Thanks

UPDATE:

Here is the style for the primary div.

.nav_container {
    background-image: url(../Graphics/menu_lvl1.gif);
    height: 101px;
    width: 720px;
}

Answer 1

Use conditional comments to target IE and change top accordingly.

IMO, that's the ONE thing you need to know to resolve IE issues.

Answer 2

My guess is IE is rendering the padding/margins differently than Chrome/Firefox (which is usually the issue with layout bugs).

You're best off to specify both padding and margin when position matters, otherwise you're leaving it up to the browser defaults (which are all different).

You should also make sure your page isn't being loaded into Quirks Mode by IE. Be absolutely sure that you have the proper DOCTYPE definition at the top of your page to force IE to load into standards mode. W3Schools has a good rundown of where and how to use it:

W3Schools - HTML doctype declaration

And then the W3C has a list of all the valid declarations:

W3C QA - Recommended list of Doctype declarations you can use in your Web document

If none of those take care of it, you can create IE version specific CSS and load them using Conditional Comments. That will allow you to specify different values for top based for IE.

Answer 3

Make sure IE isn't running in quirks mode. This happens when you have any text before the doctype declaration. If its in quirks mode it behaves hideously for CSS. Well moreso than normal.

Answer 4

Are you using a css reset? (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) It'll help you make sure all your browsers are starting with the same default padding and margin.

Answer 5

Try a reset stylesheet, and see if that helps. Include it before any other CSS declarations.