gaps in my nav

[martinrtr]

Hi - can anyone help with pesky gaps between the nav items here:

http://www.carrdale.com/fuller/index.html

I have tried zero'ing margins and padding in the <li> and <a> tags in all possible combinations without any luck. I want the rollover transparent white background to extend left and right to touch the pipes (thats' |) but something appears to pushing the <li> block away from them.

Ok here's the markup:

<div id="nav">

<ul class="zeroOut listNone txtWhite">
<li><a href="index.html">home</a></li>
<li>|</li>
<li><a href="fullerBiog.html">martin fuller</a></li>
<li>|</li>
<li><a href="gallery.html">gallery</a></li>
<li>|</li>
<li><a href="contact.html">contact</a></li>
</ul>

</div>

and here's the relevant styling:

#nav {
height: 95px;
width: 769px;
float: left;
background-image: url(images/navBg.jpg);
background-repeat: no-repeat;
}
#nav li {
display: inline;
text-transform: uppercase;
font-size: 80%;
padding: 0px;
margin: 0px;
}
#nav a {
color: #FFF;
text-decoration: none;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
}

#nav a:hover {
color: #660033;
background-image: url(images/navOverBg.png);
background-repeat: repeat;
}
/*navOverBg.png is a 1px square and transparent white)*/

#nav ul {
margin-top: 70px;
float: right;
}

CLASSES:

.zeroOut {
margin: 0px;
padding: 0px;
}
.listNone {
list-style-type: none;
}


.txtWhite {
color: #FFF;
}

Thanks in advance
Martin

[chrishirst]

Your pipe seperator is in a different <li> with whitespace (returns) between them, to where the hover is applied so it never will happen.

[martinrtr]

Thanks Chris - I thought of that and tried removing the pipes. I still get a gap between the <li> tags on rollover.

Any ideas?

[chrishirst]

It is not the pipes that needs removing, simply the whitespace

|<...>|<

Any spacing should be in the element where the :hover is applied

[martinrtr]

Sorry but I'm being more than usually stupid here! As far as I'm aware there is no white space in the <li> with the pseudo selector or in the one with the pipe.

My issue put another way is I cannot get ANY background to extend the full length of the <li> tag - whether hover or not. Ie if I just give the <li> a background colour there is still a space left and right before the start of the <li> with the pipe in. I would expect zero'ing out padding and margin to fix this but it doesn't seem to

[chrishirst]

But your :hover is applied to the anchor element NOT the parent <li>.

Anchors <a> are inline elements which will only be as wide as their content makes them.

[martinrtr]

Ok - thanks - they trouble is that still doesn't work!

Here's what I did:

#nav li:hover {
color: #660033;
background-image: url(images/navOverBg.png);
background-repeat: repeat;
}

It still doesn't extend the width of the parent element and has the added problem of making the pipes hoverable as well!

I have a vague hunch it's something to do with width - I have tried giving width vales to the <li> but this doesn't help.

Any more ideas - thanks for your help so far BTW