IE6 Adding Extra Space Between Navigation Lists

So I’m working on a new template for Wordpress and thought I was done…until I checked it in Internet Explorer 6.

I was using an unordered list to do my navigation, which means my CSS code looked something like this

#sidebar ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
}
#sidebar ul li {
display: block;
margin:0;
padding:0
}
#sidebar li{
list-style: none;

}
#sidebar ul li a {
color: #046380;
display: block;
text-decoration: none !important;
margin-left: 0px;
padding: 5px;
}
#sidebar ul li a:hover {
color: #efefef !important;
background-color: #046380;
}

And my HTML like this:

<ul><?php wp_get_archives(’type=monthly’); ?></ul>

Nothing special here, just a regular ul displayed as block and with a different colored background on hover used to display my WP archives.

The problem was that in IE6 some of the lists were displayed correctly and some were getting extra space added for no reason (below).

After combing through every line of my css code and whitewashing every browser’s stylesheet, I still could not get it to render correctly. Ready for me to save you some time? Simply add one line of code: width: XXpx;

So my new code looked like this:

#sidebar ul li a {
color: #046380;
display: block;
text-decoration: none !important;
margin-left: 0px;
padding: 5px;
width: 228px;
}

It seems that when links are dynamically generated by wordpress, IE chokes on certain ones for unknown reason (other than that is sucks at life).

 Link to this page

 Link to this page

Related posts:

1. Using Pandora’s Windows Vista Gadget I recently bought a new computer that is running Windows...

Related posts brought to you by Yet Another Related Posts Plugin.