Date: 05/14/05 (Web Development)    Keywords: css, html, web

I am attempting to put together the navigation bar in my portfolio website and I've run into a technical hitch. I'm using a list styled with CSS to remove the bullet points, put in backgrounds etc. It all works fine when I take out the bullets, padding and margins, but as soon as I try to style the links it all falls apart.


/* List formatting */

#nav {
list-style: none;
padding: 0;
margin: 0;
}

#nav2 {
list-style: none;
padding: 0;
margin: 0;
}

#nav2 li {
border: 1px solid #000000;
}


/* Link formatting */

#nav a {
display: block;
background: #FF99FF;
}

#nav2 a {
display: block;
background: #CCCCFF;
}

A really simple version of the HTML is here. I've put in some dreadful background colours to illustrate the problem. The ideas is to style the links as blocks, enabling me to put in backgrounds, padding etc. It all works in Firefox, but in IE it seems to add extra padding between the links. Taking out the display: block in the a immediately takes out the extra padding. Oddly, adding a border around the li takes out the padding, too. If only I wanted a border!

I know that it's worked for me before, but I can't work out why it isn't working this time. I've compared the code to other websites that I've designed and it should work. Can anyone tell me what I've done wrong before I start tearing my hair out? If it's an IE quirk, can anyone tell me why it's suddenly decided to bug me? Is there some declaration that I'm completely missing because I've been staring at it for so long?

Source: http://www.livejournal.com/community/webdev/199547.html