IE6 Bug – white space between 2 divs

Graphic designers just love creating pages that we know will cause IE6 issues. I honestly don’t think they can help it

As I come across my usual bugs I’m going to start posting what the bugs were and how I solved them.

Curving a box – Gap between two divs

Ok, so today I had one of my more common ones. I needed a fixed width curved box for the main content. You can see the page here:
http://www.simonday.com/testing/lush/

I needed a div to hold the top 5px high image for the top curve and then I needed a normal div for the content followed by the same curved image for the bottom.

Now in most browsers the following code will work perfectly:


#whitetop {background-image:url(top.gif); width:949px; height:5px; background-repeat:no-repeat;}
#whitemid {background-color:white;width:949px;}
#whitebot {background-image:url(bot.gif); width:949px;height:5px;background-repeat:no-repeat;}


But if you try this in IE6 you get a nice big gap between the top curved image and your main content as shown below:

IE6 is messing up the rendering of the whitespace so the solution is to add overflow:hidden to the top div (in this case #whitetop and this forces IE6 to align up the two divs correctly.

Network with Simon on LinkedIn ~ Twitter ~ Facebook ~ freelancer homepage.