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).
