I noticed while making a Wordpress theme that the code I was using on the link elements of a list added a lot of extra whitespace in Internet Explorer.
Here was my code:
CSS
ul li a{
padding:5px;
display:block;
border-bottom:1px solid #000;
color:#000;
}
ul li a:hover{
background:#000;
color:#fff;
}
padding:5px;
display:block;
border-bottom:1px solid #000;
color:#000;
}
ul li a:hover{
background:#000;
color:#fff;
}
HTML
<ul>
<li><a href=”#”>Link Text</a></li>
<li><a href=”#”>Link Text</a></li>
<li><a href=”#”>Link Text</a></li>
</ul>
<li><a href=”#”>Link Text</a></li>
<li><a href=”#”>Link Text</a></li>
<li><a href=”#”>Link Text</a></li>
</ul>
After a lot of experimenting, I finally figured out a solution. I kept the html code exactly the same, but I added this to the css:
ul li{display:inline;}
I hope this helps out some people.
-Greg