...

View Full Version : unwanted space splitting nav <li><img>s



code blue
04-27-2006, 04:52 AM
Hi,

Long time listener, first time poster..

I'm having some trouble with a navigation bar on a site i'm building at the moment. Site is static html layed-out with css.

I have a pesky problem appearing in my horizontal top navigation bar which uses images as the links (had to use images otherwise the layout falls apart when text size is increased) and styled as an unordered list.

it works fine in IE7 (havent tested in older version yet) but in Mozilla i get these pesky spaces between the images. I can get rid of some spaces by deleting carriage returns in the code, but this seems a really silly solution as it turns the code into a huge block of un-readable mess! It is also not a viable option as the client will only allow perfect code.

Can anyone suggest ay solutions? Is there a way to tell the browser to not read a linebreak in the code as a space?

below is the code that i'm using for the nav bar, and the applicable styles (there are also drop-downs attached to this, but i have removed them form this snippet as they dont affect this problem) - the page that it sits in 970px wide, so any unwanted space pushes the images to display over 2 lines.



<div id="navTop">
<ul>
<li><a href="index.asp"><img src="assets/images/nav_home_home.gif" alt="home" width="75" height="40"></a></li>
<li><a href="bladder_control_facts/index.asp"><img src="assets/images/nav_bladder_control_home.gif" alt="bladder control facts" width="165" height="40"></a></li>
<li><a href="managing_bladder_weakness/index.asp"><img src="assets/images/nav_managing.gif" alt="managing bladder control" width="175" height="40"></a></li>
<li><a href="health_wellbeing/index.asp"><img src="assets/images/nav_health.gif" alt="health and wellbeing" width="150" height="40"></a></li>
<li><a href="our_products/index.asp"><img src="assets/images/nav_products.gif" alt="our products" width="110" height="40"></a></li>
<li><a href="contact/index.asp"><img src="assets/images/nav_contact.gif" alt="contact poise" width="123" height="40"></a></li>
<li><a href="http://www.depend.com/au/professional/" target="_blank"><img src="assets/images/nav_professionals.gif" alt="for professionals" width="172" height="40"></a></li>
</ul>
</div>


and the css:



#navTop {
background: #996699;
position: relative;
margin: 0;
width: 970px;
height: 40px;
word-spacing: -10em;
}
#navTop ul {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
#navTop li {
display: inline;
padding: none;
margin: none;
word-spacing: 0;
}
#navTop img {
border: none;
padding: 0;
margin: 0;
}


I'm losing hairs over this so any advice will be greatly appreciated.

cheers,

Kriss

_Aerospace_Eng_
04-27-2006, 04:59 AM
#navTop {
background: #996699;
position: relative;
width: 970px;
height: 40px;
margin:auto;
word-spacing: -10em;
}
#navTop ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#navTop li {
float:left;
padding:0;
margin:0;
}
#navTop img {
border: 0;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum