CSS image float div problem in IE6

Question

In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.

In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.

http://www.duncanhadleytriathlon.ca/

Any suggestions for why this may be?

Answer 1

My suggestion would be to use position: absolute to place the images instead.

Other ideas would be:

• Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
• Even possibly drop #mtm and but the images directly in #main
• Ignore old browers and use CSS3 rounded corners.

Answer 2

Are you using paddings? If so, you must subtract the padding from your other values (left/right). I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3. I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at: www.dillerdesign.com/experiment/DD_roundies/

[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.