IE List Item Margin Hack

Post by 
John Crenshaw
Published 
October 16, 2014

As a web designer you learn something new everyday about the intricacies of Internet Explorer's faulty rendering of certain elements on a screen. While I'm not always a proponent of using  a Strict Doctype, it does help solve some of those issues...then again, it also requires a bit more work and time is money, right? Well, one of the problems I've had with internet explorer in the past is the way it renders lists, unordered and ordered lists, especially IE6. Even with a Strict DOCTYPE declaration, internet explorer has a nasty little habit of adding margin between list items when you've specifically written into the CSS that it shouldn't behave this way. I have to admit, I do this everyday and it took me a while to figure this out, so hopefully this will help someone else having margin problems with list items in IE 6 or any other version of internet explorer.

Internet Explorer List Item Margin Problem

So what is the problem exactly? Here's a snapshot of the sidebar of a site I'm working on in Firefox:

List item margins in Firefox
List item margins render properly in Firefox

Incidentally, this is also how it appears in IE 7. Now, the snapshot of how that same unordered list appears in IE 6:

IE list item margins
List item margins render with too much spacing in IE6

Whoa! Where did all that extra margin come from?! Well, it certainly didn't come from the CSS because every single other browser tested displays fine and all the margins are set to 0px, as well as padding. So what's the problem here?

IE Problem with List Items and Display: Block

The problem rears its ugly head, in this situation, because I have the display property of those list items set to block in the stylesheet. Internet Explorer, but especially version 6, just freaks out when trying to display lists when the links within those lists are styled display: block. So, how do we fix it? We need to trick internet explorer (because its bugginess also allows us to trick it into behaving the way we want) into thinking that the display property is set to inline, after we've done that we can essentially tell it we've changed our mind and we want the display property set to block. This will make IE really throw a temper tantrum, but it's exactly the temper tantrum we want it to throw.

Conditional Comment Styles

To solve this we need to add a conditional comment in our header section, preferably near our other stylesheet declarations. This conditional comment is something only IE will read because Microsoft realized their browser was so buggy there had to be a way to give instructions specifically to IE without that instruction being interpreted by other browsers:

1
2
3
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/styles/ie.css"  />
<![endif]->

Now you need to create a new stylesheet for Internet Explorer only and call it ie.css.

Once you've done that add these two lines to the stylesheet:

1
2
#sidebar li a{display:inline-block !important;}
#sidebar li a {display:block !important;}

The "#sidebar" part is part of my stylesheet because the sidebars on that particular site are wrapped in a <div id="sidebar"></div>. When dealing with IE it's always best to be as specific as possible. Also, you'll notice I've added the !important declaration to this. The purpose of that is to ensure that when I change some styles later on IE doesn't go and try to ignore this rule. Generally, IE will adopt the most specific style, so, if I were to add the following line to my general stylesheet:

1
#sidebar ul li a{display: block; }

IE may try to ignore the hack above in the ie.css file. Why? Because this second declaration is more specific. The !important declaration prevents that.

So, now that we've added those two lines to ie.css, what does IE 6 show us?

IE List Item Margins Fixed
Final result - Renders properly in IE6

And there you have it, it took a bit of trickery to get that rendered properly in IE6, but it wasn't all that difficult now was it?

Never miss
an update

We never share your info. View our Privacy Policy
Almost there. Follow these 2 steps to complete your subscription:

1. Click the link in the confirmation email we just sent you

2. Add john@uforocks.com to your address book

Thanks!
Oops! Something went wrong while submitting the form.
THere's More

Post you might also like

All Posts
Analytics
Oct
17
//
2020

Causes & Solutions to Website Traffic Drops After a Redesign

New websites are supposed to outperform the old one, but that doesn't always happen.
Strategy
Oct
15
//
2020

This Famous Ad Exec Talks About a Big Brand Who's Existence Just Doesn't Make Sense

The irrational product that kicked off a $4 billion brand
Strategy
Oct
12
//
2020

How to Gain Market Share

Find out what it takes to grow.
Strategy
Jul
15
//
2020

Marketing Idea 0001: Target the Larger Audience

Sometimes customers that want to rent your product are actually better candidates to buy it.
Paid Media
Jun
12
//
2020

PPC vs CPC: What's the Difference

They aren't the same thing, but they're pretty closely related