|
Posted by Ben C on November 15, 2006, 5:04 pm
Please log in for more thread options
> Ben C wrote:
>>> amandadev@gmail.com wrote:
>>>> Hi there,
>>>>
>>>> I actually have two problems with the following site:
>>>> http://coombes.amandadevries.com:
>>>>
>>>> 1. Why does Firefox ignore my request for a 'red' background for my
>>>> .container? IE doesn't.
>>> Strange. I see a black background, but the DOM inspector shows the
>>> computed background color for that DIV is rgb(102, 51, 51).
>>
>> The background colour is rgb(102, 51, 51), but you don't see any of the
>> background colour because the .container div is completely full of
>> (black) things. If you give it a bit of padding you see the #633 (102,
>> 51, 51) colour around the edges.
>
> I hadn't dug all the way down. Most of the items under it have a
> transparent background, but now I see that the navigation list has a
> black background. On the other hand, the paragraph and div that follow
> the div containing the navigation list have transparent backgrounds, and
> so do all their children.
>
> I see the rest of the problem now. Everything inside the container div
> is floated or has only floated children. Therefore, the container div
> itself doesn't envelop them and has no height.
> footer has clear: both; which is why it's entirely below the container div.
>
> I gather that in IE the container div IS enveloping its children.
Sounds like the sort of incorrect thing it would probably do...
> Isn't the solution to float the container div and give it explicit
> width: 100%?
That should work well, yes. Then the container will be the "block
formatting context box" for the floats, which makes it grow to encompass
them.
|