Это «таинственное пространство между элементами списка», которое иногда появляется в IE. Часто это происходит, когда элемент списка и ссылка внутри имеют разные типы отображения или hasLayout применяется непоследовательно. Но на весь сценарий влияет комбинация display, line-height и hasLayout. : -)
Это приводит их все к одной и той же отправной точке (или это происходит в IE7, что у меня есть в данный момент.) Я думаю, что большая проблема для вас была в том, что вы установили #mainmenu и #mainmenu a для отображения: block но оставил #mainmenu li по умолчанию.
#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%;
}
Вы можете увидеть некоторые примеры различных ситуаций, когда это происходит, просмотрев http://www.brunildo.org/test/IEWlispace.php в IE. В нижней части этого сайта он упоминает различные исправления для различных причин.
Если это не поможет вам, проверьте также:
http://gtwebdev.com/workshop/gaps/white-space-bug.php
Есть и другие решения, но сейчас я не могу найти свою любимую ссылку. : - (
Подсказка
Если вам в конечном итоге понадобятся дополнительные правила только для IE7 или IE6, воспользуйтесь этим методом http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ для IE.
Несвязанный совет:
Если вам абсолютно не нужно имя тега для повышения специфичности вашего правила, лучше его опустить. Не только потому, что это делает ваши селекторы короче, но из-за того, как браузеры анализируют и применяют CSS. Они начинаются в конце правила, поэтому в
ul#mainmenu li a
В худшем случае браузер: находит все a, проверяет li родителей, проверяет #mainmenu родителей, а затем проверяет, что #mainmenu является ul. Это излишне и неэффективно, особенно если добавить, что селекторы элементов (по мнению поставщиков браузеров) менее эффективны, чем классы и идентификаторы. (Это означает, что если у вас есть класс вроде .menu-item в li, лучше использовать его в селекторе, чем li.)