I was knocking up a new site design yesterday for Marketing Foundation using mainly DIVs and a few tables (I know I shouldn´t but it´s just quicker sometimes). I got it all done in an hour or so except for one little bit.
The right hand column had a gradient fading from grey to white as it goes down the page. I´d done this by using a one pixel column as the background for the td in css. The problem I was having was that there was a second picture that in the design just sat in the bottom of this td.
I decided to get around this by putting a div in the td and putting the background-image as the photo. I had a quick looky in FireFox and all was well. I then loaded up IE and suprise, suprise, it wasn´t right. For some reason the div wasn´t being stretched to 100% height like I had specified in the CSS. I started playing around with both the html and the css but after an hour I was getting nowhere.
I started Googling but couldn´t find anything too helpful. There where people with similar problems on the forums but no definate answer. After two and a half hours of playing around with this I started finding posts that suggested it might be the doctype and not the code. After another hour of searching I found a post saying that removing the doctype from the code might fix it. I tried this and wahoo!, it worked perfectly.
Damn, Internet Explorer is shit!