Oh Internet Explorer... how many times have I encountered your nasty little bugs? How many hours have you caused me to lament the fact that you exist?

Today I was working on a design for the upgraded Archdiocese of Saint Louis website (more to come in the future!), and encountered a nasty little bug in Internet Explorer having to do with CSS list positioning. Apparently, if you define an a element inside a list with "display: block," but don't set a width on the parent element (the li, and then the ul, in this case), the li elements will get an extra few pixels of margin applied below each list element.

The fix is to add a couple lines to your IE-specific conditional stylesheet (for IE 7 and below only—IE 8 fixes this bug), as outlined in this article.

Thank you for wasting another hour of my time, Microsoft.

End result:

Archdiocesan Archives Menu