0
Un problème HTML/CSS, si quelqu'un serait assez bon pour aider ...Nav Menu et des problèmes d'espacement CSS dans IE
je le CSS et le code suivant pour mon nouveau menu, mais IE8 rend trois fois le montant de l'espace entre les lignes de texte dans le menu (span grand et petit).
Lorsque j'utilise le retrait de texte sur les éléments du sous-menu au lieu de la marge, c'est à ce moment-là qu'il se lit. IE7 est très bien, tout comme Chrome, Firefox, etc.
Voici le CSS:
.menu {float:left;width:990px;height:47px;background:#fff url("/images/menu-icons/repeat-47px.png") repeat-x;margin:0;list-style:none; position:relative; }
.menu span.border {display:block;float:left;position:relative;border-right:1px dotted #ddd;height:26px;margin:10px 5px 10px 0;}
.menu li.top {height:47px;display:block;float:left;position:relative;}
.menu li.end {border-right:0;height:47px;display:block;float:left;position:relative;}
.menu li a.top_link {display:block;height:47px;color:#3a3e46;font-size:15px;width:115px;text-align:left;text-transform:lowercase;margin:0;display:block;float:left;text-decoration:none;cursor:pointer;}
.menu li a.top_link span {display:block;float:left;position:relative;width:69px;height:47px;}
.menu li a.top_link span.small {height:22px;line-height:29px;font-size:13px;}
.menu li a.top_link span.big {height:22px;font-size:14px;}
.menu li a.top_link:hover {height:47px;color:#b21589;background:transparent;border-bottom:0;}
.menu li a.home_link {width:127px;background:transparent url("/images/menu-icons/home.png") no-repeat 12px 7px;}
.menu li a.home_link span {line-height:40px;text-indent:60px;}
.menu li.home:hover > a.home_link {background:transparent url("/images/menu-icons/home.png") no-repeat 12px 7px;}
.menu li a.business_link {width:164px;background:transparent url("/images/menu-icons/business_dir2.png") no-repeat 12px 7px;}
.menu li a.business_link span {text-indent:68px;}
.menu li.business:hover > a.business_link {background:transparent url("/images/menu-icons/business_dir2.png") no-repeat 12px 7px;}
.menu li a.events_link {width:140px;background:transparent url("/images/menu-icons/events.png") no-repeat 12px 7px;}
.menu li a.events_link span {text-indent:68px;}
.menu li.events:hover > a.events_link {background:transparent url("/images/menu-icons/events.png") no-repeat 12px 7px;}
.menu li a.news_link {width:133px;background:url("/images/menu-icons/news.png") no-repeat 12px 7px;}
.menu li a.news_link span {text-indent:68px;}
.menu li.news:hover > a.news_link {background:transparent url("/images/menu-icons/news.png") no-repeat 12px 7px;}
.menu li a.offers_link {width:140px;border-right:0;background:transparent url("/images/menu-icons/offers1.png") no-repeat 12px 8px;}
.menu li a.offers_link span {text-indent:70px;}
.menu li.offers:hover > a.offers_link {background:transparent url("/images/menu-icons/offers1.png") no-repeat 12px 8px;}
.menu li a.links_link {width:128px;background:url("/images/menu-icons/pin.png") no-repeat 12px 7px;}
.menu li a.links_link span {text-indent:50px;}
.menu li.links:hover > a.links_link {background:transparent url("/images/menu-icons/pin.png") no-repeat 12px 7px;}
.menu li a.travel_link {background:url("/images/menu-icons/travel.png") no-repeat 12px 8px;}
.menu li a.travel_link span {text-indent:68px;}
.menu li.travel:hover > a.travel_link {background:transparent url("/images/menu-icons/travel.png") no-repeat 12px 8px;}
Et html:
<div style="clear:both;height:47px;">
<ul class="menu">
<li class="top home"><a class="home_link top_link" href="/<%=(Session("PublicFranchiseName"))%>/pages/index.html" title=""><span>Home</span></a>
<span class="border"></span></li>
<li class="top business"><a class="business_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/index.html"><span><span class="small">Business</span><br /><span class="big">Directory</span></span></a>
<span class="border"></span></li>
<li class="top events"><a class="events_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/whats-on.html"><span class="down"><span class="small">Local</span><br /><span class="big">Events</span></span></a>
<span class="border"></span></li>
<li class="top offers"><a class="offers_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/discounts.html"><span class="down"><span class="small">Local</span><br /><span class="big">Offers</span></span></a>
<span class="border"></span></li>
<li class="top news"><a class="news_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/community.html"><span><span class="small">Local</span><br /><span class="big">News</span></span></a>
<span class="border"></span></li>
<li class="top links"><a class="links_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/links.html"><span class="down"><span class="small">Useful</span><br /><span class="big">Links</span></span></a>
<span class="border"></span></li>
<li class="end travel"><a class="travel_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/travel.html"><span class="down"><span class="small">Local</span><br /><span class="big">Travel</span></span></a></li>
</ul>
</div>
IE ignore la hauteur réglée sur chaque travée imbriquée pour le texte à côté de chaque image. Toutes les idées sont les bienvenues!