IE7 CSS Background Colour Issue

Tags: IE7, IE, Internet Explorer, Bug

Recently had an issue with IE7 not showing the background colour for a div.

The basic layout was a navigation on the left and content on the right. The background colour for the left hand navigation is supposed to extend to the bottom of the page. To achieve this I put the background colour on the containing div and set the background of the content to white, leaving just the left hand navigation with the background colour. This worked fine in all browsers except IE7 where the background colour wouldn't show.

I'm sure I've tried this technique a number of times before, but for some reason this time it wasn't working in IE7. After experimenting I found that adding padding or a border to the containing div would make it render correctly. The final "fix" was to put a border around the containing div set to the same colour as page background. I can only assume that it is yet another rendering bug in IE7.