Home/ Questions/Q 771811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:42:41+00:00

I have a relative positioned div inside another div. The inside-div is positioned with

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0