Nav menu & CSS spacing issues in IE

Question

A html/CSS problem, if someone would be kind enough to help...

I have the following CSS and code for my new menu, but IE8 renders triple the amount of space between lines of text in the menu (span big and small).

When I use text-indent on the sub menu items instead of margin, that's when it plays up. IE7 is fine, as is Chrome, Firefox etc.

Here is the 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;}

And 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 is ignoring the height set to each nested span for the text next to each image. Any ideas are welcomed!

Answer 1

Solved! The line breaks - doh