{"id":122,"date":"2008-05-14T08:00:07","date_gmt":"2008-05-14T13:00:07","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=122"},"modified":"2008-05-14T08:00:07","modified_gmt":"2008-05-14T13:00:07","slug":"fixing-ie6-whitespace-bug","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/fixing-ie6-whitespace-bug\/","title":{"rendered":"Fixing the IE6 Whitespace Bug"},"content":{"rendered":"

\"\"<\/p>\n

Sometimes, when I\u2019m building a vertical navigation menu (like the one pictured above), Internet Explorer 6 will fight with me in a fairly annoying way: it adds a bunch of white space between the list items (specifically, I think it\u2019s adding space below each list item). This space isn\u2019t a margin, and it isn\u2019t padding… it\u2019s just empty, un-selectable space. So what\u2019s going on, and how do we fix it?<\/p>\n

The \u201cwhat\u2019s going on\u201d part is simultaneously simple and perplexing: IE6 is treating all the empty space inside of your HTML lists \u2013 that is, the stuff between your closing <\/li> and next opening <li> tag — as real space. That\u2019s the simple part. The confusing part is, why would it choose to interpret this space as \u201creal,\u201d when it ignores all of the other space between tags in pretty much every other situation out there? Well, that\u2019s just IE6 for you, and that\u2019s the perplexing bit.<\/p>\n

Luckily, there is a really easy solution to this problem. Actually, truth be told, there are several<\/em> solutions. Depending on your situation, each might be the right fix for you.<\/p>\n

Fix #1: Remove All Whitespace<\/h3>\n

This is the most arcane of all the solutions, but to be honest, it\u2019s the one I\u2019ve used most often in the past \u2013 because I didn\u2019t know about the other solutions! If you remove the white space from your code, this prevents IE from having anything to screw up. Specifically, if you remove the white space between your closing list item and the next opening list item, and your last closing list item and the end of your list, this will fix the problem. So you just need to turn this:<\/p>\n

<ul>\n\t<li><a href="#">First Item<\/a><\/li>\n\t<li><a href="#">Second Item<\/a><\/li>\n\t<li><a href="#">Third One!<\/a><\/li>\n<\/ul><\/pre>\n
Into this:<\/p>\n
<ul>\n\t<li><a href="#">First Item<\/a><\/li><li>\n\t<a href="#">Second Item<\/a><\/li><li>\n\t<a href="#">Third One!<\/a><\/li><\/ul><\/pre>\n
Like I said, this isn\u2019t exactly an elegant solution. But it does work, and it can be useful in places when CSS isn’t entirely reliable (like in HTML emails).<\/p>\n
Fix #2: Float the Anchor Tags<\/h3>\n
Jon Hicks popularized this fix years ago.<\/a> Basically, you float the anchor tags left, and then clear them left as well, like so:<\/p>\n
ul a {\n\tdisplay: block;\n\tfloat: left;\n\tclear: left; }<\/pre>\n
This causes your links to behave like floated elements, which naturally don\u2019t have any space between them. Unfortunately, it also prevents your links from filling all the horizontal space available, which would make a mess of the example I used above, because I\u2019m relying on that width to create a background color and a border. However, if your links don\u2019t have any fancy hover states or borders, this solution would work just fine.<\/p>\n
Fix #3: Apply a Bottom Border<\/h3>\n
Another useful solution is to apply a border to your list item. Why does this work? I have no idea. Does a border just anywhere work? Nope. It has to be applied to the bottom of the list item (or to all four sides, as long as the bottom is included):<\/p>\n
ul li {\n\tborder-bottom: 1px solid #666; }<\/pre>\n
I suppose the logic on this one is that the space is on the bottom of the element, so specifying a definitive edge to the box causes IE6 to recognize the \u201creal\u201d end of the element. Whatever the reasoning, it works, and it\u2019s a good solution if you don\u2019t mind a pixel of extra space in between your elements in return for getting rid of the great swaths of space IE had introduced. And sometimes it even works in the design. In the image above, for example, the border between the items could just as easily be applied to the list item instead of the anchor (which is where I had placed it initially).<\/p>\n
Fix #4: Use Display: Inline<\/h3>\n
In my experience, the most useful solution of the four is to force your list items to display inline, instead of as a block-level element (which they are by default):<\/p>\n
ul li {\n\tdisplay: inline; }<\/pre>\n
As far as I can tell, this technique was first popularized by Andy Budd waaay back in 2003<\/a> (of course, he was dealing with IE5 back then). I like this solution because it seems to do the least harm to my lists. It doesn\u2019t add any additional space that I need to account for. It also doesn\u2019t harm the size of my anchor tags: if I apply a \u201cdisplay: block\u201d to my anchors, like I\u2019ve done in the image above, my anchor will stretch out the \u201cinline\u201d list item to its standard size. <\/p>\n
Any of these solutions will remove the extra space from between list items in IE6. The key is simply to pick the fix that works best with your particular design.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Sometimes when I\u2019m building a vertical navigation menu Internet Explorer 6 will add a bunch of white space between the list items. So what\u2019s going on, and how do we fix it? […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,170],"tags":[211,266,278,283,378],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/122"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}