Bug Bucket
March 8, 2008 \ 4 CommentsI've recently noticed that as I resolve programming bugs, I often run in to them again later on. I'll typically forget what I did to fix the issue and have to research it anew. This here article, affectionately termed the "Bug Bucket," will be where I document XHTML, CSS, and JavaScript bugs. Most of these bugs will likely be associated with Internet Explorer. Hopefully this will be a nice, ongoing journal to keep as well as prove to be a useful resource for fellow web designers.
Each bug will be described below in its own section, and I'll tack them on as I find and fix them. I welcome your suggestions in the comments section.
The Big Fat IE float clearing divYou may have noticed that when you use clear:both; in your CSS to sit below a multi-column layout that the div is several pixels tall in IE6.
In Firefox, the div is 0 pixels talls (as far as I can tell). Here's the IE-specific CSS fix:
.clearit{
clear:both;
height:0px;
overflow:hidden;
margin-top:-1px;
}
As pointed out in the comments below, there are cleaner ways to achieve this same effect. You can fiddle with the :after pseudo class which requires an IE hack, or, as SitePoint points out, you can just add overflow:auto; to the containing div. That seems to be the simplest solution I've seen so far.
Tags: bug bucket
Sounds like a new blog category, not necessarily an entry that gets updated and nobody notices. If it's good enough to put on the internet for one person (you), then why can't it be good enough to share with the rest of us (and let us know, via your feed)?
Is this an empty div you are placing beneath your floated elements solely to clear them? If so, that is some horrible coding. Almost as bad as your Javascript/PHP post. You should be using the clearfix technique.
http://www.positioniseverything.net/easyclearing.html
@ Pedro: I'm going to include Bug Bucket links in a couple places on the site. I'll see if I can figure out how to generate an RSS feed for that specific article.
@ Dude(tte): It may not be as hip (though it's the going W3C recommendation for handling this) as other solutions, but it's simple. Remember that we don't have to parse our code by hand anymore, so choosing one solution over another is a fairly subjective matter.
I look forward to see what else end up in the Bucket! I have always wondered why IE6 does that and I really like your approach to fix it!