css

Internet Explorer version 6 (IE6) is well known for its quirkiness - so much so that some HTML/CSS pros derive a good portion of thier income from helping other designers figure out how to work around its bugs.

A number of IE6's bugs have even been given cute little names to help offset the often violent reaction that developers have when they come across them. There's the "double border", the "3-pixel gap", the "guillotine", and the topic of this post - the "peek-a-boo" bug.

As a web developer, I'm often called upon to translate a designer's mockup into valid XHTML and CSS that will work across a wide range of browsers. Like many developers, Firefox is my browser of choice while Internet Explorer (IE) is avoided at all costs.

I recently came across an issue with a simple XHTML DIV element that wasn't behaving properly when viewed with IE6. The issue with the simple DIV was that I had a 1 pixel border applied to it, but the entire border refused to show up in IE6: