This blog post is actually for two problems with IE6 I’ve come across recently.
I’m sure I discovered and solved these before, but I keep having to find the answer again, so I thought I’d blog about it to remind myself and maybe help someone else out, too.
This blog entry is composed of two IE6 problems that I’ve found the answers to. Since we as developers still have to support IE6 for that few 7.2% that refuse to upgrade, there’s a lot of fixes (and/or hacks) out there to get the job done. I prefer the fixes. As a rule, I don’t use hacks, I just play around with it till it works.
In IE6, sometimes it puts extra padding or margin at the bottom of images and div tags like so:
Notice the extra space between the banner and the menu? Yeah, that’s only in IE6.
As I’ve said, I’ve found the solution to this before, but to avoid needlessly googling again, here it is.
My CSS for the entire banner before:
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
Since IE6 has an overflow issue, the correct fix for it is to hide the overflow like so:
This solution also solves the other problem I had when I wanted the divs to move and not drop down when the window gets smaller.
I needed an orange bar under a header image to kind of separate the page out. Kind of like a horizontal rule. I probably could have used a hr, but decided to use a div tag. It was to span the entire length and be 8 pixels tall.
My CSS was the following:
This code works in ALL browsers EXCEPT IE6.
IE6, I guess, expects there to be text inside the div tag, but there isn’t. It uses the font-sizes from other stuff, so we need to specify to it that there is no font or text.
I added the following to my #orange_separator CSS:
IE now thinks that the text inside has a font-size of 0 and since there is no text, the height of the div is 8 pixels.