Internet Explorer and the LI tag

Once again I forgot about one of the (many) bugs in Internet Explorer while I was completing the style sheet for a new website to one of my clients. In order to present the menus I’m using the List feature in HTML, and it all looked fine in every browser except IE.

For some reason IE decides by default to add a huge space between each list element which breaks up the design to say the least. The “fix” however is simple, but as this post reflects its easy to forget about it. All you need to do is add the following in your CSS:

* html ul li a { height: 100%; }

Or as follows if you have assigned class names for the link tag A and placed it inside one of your DIV tags:

* html div#someID ul li a.someClass { height: 100%; }

Hope this post proves helpful to anyone else who suffers from Goldfish Memory from time to time…

About Author

Max C

See author's posts