IE CSS Bug

[mschoening]

Hi,
I have some problems with this site: maximilianschoening[dot]com/alpha

Everything looks fine in FF and Safari but not in IE (5.5, 6, 7). There seems to be a bug with the bottom padding. Has anybody got a clue?

Thanks,
Max

[fredda]

Moving the padding: 10px from .box-top to .box-bottom instead made it look fine in IE as well. I have no good explanation why that is .

[mschoening]

Hi,
that doesn't really help. The rounded corners don't work if I do that. I do agree that the problem with the bottom padding is solved but the top corners don't appear correctly...

[Rayzur]

Hi mschoening, Welcome to SitePoint!

You are having a haslayout issue with IE. The simplest way for an element to gain a layout is for it to have a dimensional CSS property applied—for example, a width or height.

If you will give a width to your .box_top it will work in IE. Your #wrapper is 600px less 20px padding on left and right. You also have 10px padding left and right on the .box_top, so take out another 20px and that gives you 540px on the .box_top div.

   .box_top {
        background: url(../images/box_bg_top.gif) left top no-repeat;
        padding: 10px;
        width:540px;
    }

Give that a try , It worked when the images were disabled.

[mschoening]

Thanks, worked like a charm!

[Rayzur]

Your Welcome!

Haslayout is one of the most common IE problems, I have encountered two of them within the last hour.