CSS Forum

**FiZiX** · 07-24-2008, 05:36 PM

Here's another strange IE7 bug I hope somebody can help me with. It started when the rounded corners on a floated div would not display. I've now worked it down to this small test page with colors instead images:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        .top, .bottom { 
            background-color: blue;
            height: 10px;
        }
        .inside {
            background-color: green;
            text-align: center;
            height: 20px;
        }
        .outside {
            padding: 6px;
            background-color: red;
            float: right;
        }
    </style>

</head>

<body>

    <div class="outside"><div class="top"></div><div class="inside">Test</div><div class="bottom"></div></div>

</body>
</html>

You'll notice that the top and bottom divs are not displaying the blue background color that they should. However, if you remove the float tag from the outside class, you'll see the blue background. Does anybody have any idea how to fix this?

Thanks!

**vangogh** · 07-24-2008, 09:36 PM

I think it's because the top and bottom divs have no width. They want to inherit the width from the outside div, but that also hasn't been defined. When you take the float away the width of the outside div defaults to the width of the body and all the internal divs inherit as well.

If you give the top and bottom divs a width or instead add a width to the outside div you'll see the blue background.

**FiZiX** · 07-25-2008, 09:46 AM

Thanks, that was it! You are a scholar and a gentlemen.

**vangogh** · 07-25-2008, 07:49 PM

Glad to help