Я был бы очень признателен за помощь.Я пытаюсь удалить серую линию из верхней навигации, которая отображается в некоторых браузерах IE 8.По какой-то странной причине мой клиент видит серую линию перед горизонтальным текстом меню в IE 8, и я не вижу эту строку в моем IE 8. Трудно отлаживать, когда вы не видите его передвы.У кого-нибудь есть идеи?
Вот ссылка на скриншот: http://i.stack.imgur.com/ODSSS.jpg
Обратите внимание на серую линию слева от организации-члена ???Каждый раз, когда вы изменяете размер браузера, серая линия также перемещается по верхней части навигации.Так странно ...
Вот мой лучший код CSS для навигации:
.top-nav{width:825px; float:right; clear:both; margin:0 0 10px 0;z-index:1!important;}
ul#horizontal-nav,ul#horizontal-nav ul{margin:0;list-style:none;background-color:#ffffff;}
ul#horizontal-nav ul {display:none;position:absolute;left:0;top:100%;padding:0;background-color:#ffffff; border-radius:15px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#horizontal-nav li:hover>*{display:block; }
ul#horizontal-nav li:hover{position:relative;}
ul#horizontal-nav ul ul{position:absolute;left:100%;top:0;}
ul#horizontal-nav{padding:0;display:block;font-size:0;float:left;}
ul#horizontal-nav li{display:block;white-space:nowrap;font-size:0;float:left;border-width:1px;border-style:solid;border-color:#6699cc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#horizontal-nav>li,ul#horizontal-nav li{margin:0 0 0 6px;}
ul#horizontal-nav a:active, ul#horizontal-nav a:focus{outline-style:none;}
ul#horizontal-nav a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font-size: 12px; font-family:"Arial", serif, sans-serif;color:#666666;padding:2px 24px;background-color:#ffffff;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent; }
ul#horizontal-nav ul li{float:none;margin:0;}
ul#horizontal-nav ul a{text-align:left; border-width:1px;border-style:solid;border-color:#6699cc; border-top:none; border-bottom:1px solid #666666;}
ul#horizontal-nav li:hover>a{font-size: 12px; font-family:"Arial", serif, sans-serif;color:#0066cc;text-decoration:none;}
ul#horizontal-nav li ul li{border:none; width:156px;}
ul#horizontal-nav li ul {z-index:1;}
ul#horizontal-nav img{border:none;vertical-align:middle;margin-right:8px;}
ul#horizontal-nav img.over{display:none;}
ul#horizontal-nav li:hover > a img.def{display:none;}
ul#horizontal-nav li.topmenu>a{height:20px;background-color:#ffffff;border-radius:15px;-moz-border-radius:10px;-webkit-border-radius:10px;font-size: 12px; font-family:"Arial", serif, sans-serif;color:#666666;text-decoration:none;line-height:19px;background: url("../images/topNav-arrow-off.gif") no-repeat; background-position:6% 45%; margin-left:10px;}
ul#horizontal-nav li.topmenu:hover>a{font-size: 12px; font-family:"Arial", serif, sans-serif;color:#666666;text-decoration:none;line-height:19px;background: url("../images/topNav-arrow-on.gif") no-repeat; background-position:left 45%;}
ul#horizontal-nav li.subfirst>a{border-top:1px solid #6699cc; border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
А это мой HTML-код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="top-nav">
<ul id="horizontal-nav" class="topmenu">
<li class="topmenu"><a href="#">Link 1</a></li>
<li class="topmenu"><a href="#">Link 2</a>
<ul>
<li class="subfirst"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="sublast"><a href="#">Item 3</a></li>
</ul>
</li>
<li class="topmenu"><a href="web/secondary-page.html">Link 3</a></li>
<li class="topmenu"><a href="#">Link 4</a></li>
<li class="topmenu"><a href="#">Link 5</a>
<ul>
<li class="subfirst"><a href="#">Item 1</a></li>
<li class="sublast"><a href="#">Item 2</a></li>
</ul>
</li>
</ul>
</div>
Спасибо за вашу помощь.