margin problem in firefox..

liunx

Guest
hi,
i got this little margin trouble, well, id admit im a bit lost with all this css...
could you check that page <!-- m --><a class="postlink" href="http://torzuchina.com/index.php">http://torzuchina.com/index.php</a><!-- m --> with IE and moz, and tell me how i could have the menu aligned exactly the same in the two browsers?It's an easy fix. Your #nav <ul> tag is floated left. The style rule margin: 20px 9px; places a left margin of 9 pixels. Internet Explorer has a bug that doubles the margin of a floated element, for the margin on the same side as the element is floated. In other words, #nav is floated left, and IE doubles the left margin: IE Double Float Margin Bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/doubled-margin.html">http://www.positioniseverything.net/exp ... argin.html</a><!-- m -->)

All you've got to do is add this one attribute and value to the style declaration for ul#nav: display: inline;

This doesn't make your navigation an inline element as floated elements are automatically converted to block elements (even if the HTML tag was originally inline). The following page at the Micrsoft Developers Network Web site gives a little insight as to why Internet Explorer acts so funky: hasLayout Property (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp">http://msdn.microsoft.com/workshop/auth ... layout.asp</a><!-- m -->). Essentially, if the following CSS attributes are not set: height, width, display, float or position; IE renders block elements as blocks of goo that don't seem to display logically.
 
Back
Top