CSS Quicktip: Small gaps in vertical navigation lists on IE
I recently stumbled over a small but annoying problem when building image based, vertical navigation lists for IE. Unlike horizontal navigation lists, there will be a small gap between each link as you can see on the image below (I’ve added the black borders just for visualization).
It tooked me about half an hour (*shame on me*) to find out, that you just have to add a display: inline to the list element:
#mainnav li {
display: inline;
}
And voilà, the gaps are gone:
