StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is the "mysterious space between list items" that sometimes shows up in IE. Often it happens when the list item and link inside have different display types, or hasLayout is inconsistently applied. But the whole scenario is affected by a combination of display, line-height, and hasLayout. :-)</p> <p>This gets them all to the same starting point (or it does in IE7, which is what I have at the moment.) I think the big issue for you was that you set #mainmenu and #mainmenu a to display:block but had left #mainmenu li at its default.</p> <pre><code>#mainnavcont { float:right; width:673px; } #mainmenu, #mainmenu li, #mainmenu a { display:block; margin:0; padding:0; line-height:1; list-style:none; } #mainmenu {} #mainmenu li {} #mainmenu a { margin-left:-10px; padding-left:10px; color:#000; font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; text-decoration:none; } #mainmenu a:hover, #mainmenu .current-menu-item a, #mainmenu .current-page-ancestor a { background:url(images/navbg.png) no-repeat 5px 50%; } </code></pre> <p>You can see some examples of various situations where this occurs by viewing <a href="http://www.brunildo.org/test/IEWlispace.php" rel="nofollow">http://www.brunildo.org/test/IEWlispace.php</a> in IE. At the bottom of that site he mentions various fixes for various causes.</p> <p>If this doesn't get you all the way there also check out:</p> <p><a href="http://gtwebdev.com/workshop/gaps/white-space-bug.php" rel="nofollow">http://gtwebdev.com/workshop/gaps/white-space-bug.php</a></p> <p>There are some other solutions out there as well, but I can't find my favorite reference right now. :-(</p> <p><strong>Related Tip</strong></p> <p>If you end up needing more rules for just IE7 or IE6, check out this method of <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="nofollow">http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/</a> targeting IE.</p> <p><strong>Unrelated Tip:</strong></p> <p>If you don't absolutely need the tag name to increase your rule's specificity, it's best to omit it. Not just because it makes your selectors shorter, but because of the way browsers parse and apply CSS. They start at the end of the rule, so in</p> <pre><code>ul#mainmenu li a </code></pre> <p>Worst case scenario the browser: finds all a, checks for li parents, checks for #mainmenu parents, and then checks that #mainmenu is a ul. This is superfluous and inefficient, especially when you add in the fact that element selectors are (according to browser vendors) less efficient than classes and ids. (Which means if you have a class like .menu-item on the li it's better to use that in your selector than li.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload