Have Geek Brain

How does this relative positioned div render differently in IE?

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

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

Does anyone admit this?

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

Also, I just want to customize the browser to my website, so an article on the most common IE issues 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;
}
+2
html css php


a source to share


6 answers


My guess is IE renders padding / margins differently than Chrome / Firefox (which is usually due to layout errors).

It is best to specify both padding

and margin

when position matters, otherwise you leave it to default values ​​in the browser (they are all different).

You should also make sure your page is not loading in IE Quirks mode. Be absolutely sure that you have the correct DOCTYPE definition at the top of the page to force IE to load in standard mode. W3Schools has a good idea of ​​where and how to use it:

W3Schools - HTML Document Declaration



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

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

If none of them take care of it, you can create your own CSS version of IE and load them using conditional comments. This will allow you to specify different values ​​for top

, based on IE.

+4


a source to share


@Camran



Here you go, I hope this helps you. http://www.positioniseverything.net/articles/cc-plus.html Everything is fully detailed and easy to follow. Trust me, I had the same problem and what killed me is everyone I spoke to who claimed they were professionals, claiming it was impossible to position perfectly, but here is someone who came up with a solution ...

+2


a source to share


Make sure IE is not running in quirks mode. This happens when you have text in front of the doctype declaration. If in quirks mode it behaves terrible for CSS. Good than usual.

+1


a source to share


Use conditional comments for target IE and change top

accordingly.

IMO that's ONE thing you need to know to fix IE problems.

0


a source to share


Are you using css reset? ( http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ) This will help you make sure that all your browsers start with the same default padding and margin.

0


a source to share


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

0


a source to share






More articles:


All Articles