The blog of Alex Mazzucca: Web developer, musician, enthusiast.
search
Post

IE6 Adding Extra Space to Tags

Wednesday, August 27th, 2008 at 3:39 pm

IE Spacing
The goal was simple: make an image a link while using a css-based rollover. The rollover was accomplished using one image which had both the up and over states, the over state being directly below the up state in the image. Then, when the user hovers over the link, the background position moves to the bottom revealing the over state as the background image for the tag. Fine. The only problem is that in IE6 (&*$#@%&#*), there is a 4px or so space added to the bottom of the tag which reveals the damn over state (see image above)! Anyway, I’ve found a workaround:

a:hover{overflow:hidden;);

That’s it. Suck on that, IE. No more using negative padding values or spacing the up state 4px away from the over state in the image. I hope this helps someone out there. Later.

UPDATE: The extra space was because the tag was empty. Apparently IE6 will add 4px to the bottom of empty tags, divs included. What the hell is that about?

Go Back