Problems with min-height

[amandadev]

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.
2. Why does Firefox ignore my 'min-height:50%' for the container?
Again, IE doesn't. See
"http://coombes.amandadevries.com/people/Duong.html" to see what I
mean. Because the height is only determined by my text, my image hangs
out of the container.

Both pages pass validation, as does the CSS, with the exception of one
error.

And yes, I use a table for the footer because I can't figure out
another way to have each phrase aligned as you see them...if anyone has
suggestions I'm all ears!

Thanks,
Amanda
www.amandadevries.com

[Harlan Messinger]

am*******@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).

[Ben C]

On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:

am*******@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.

[Harlan Messinger]

Ben C wrote:

On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:

>am*******@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. The table used for the
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.

Isn't the solution to float the container div and give it explicit
width: 100%?

[Ben C]

On 2006-11-15, am*******@gmail.com <am*******@gmail.comwrote:

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.

The background is there (see my other post in this thread).

2. Why does Firefox ignore my 'min-height:50%' for the container?
Again, IE doesn't. See
"http://coombes.amandadevries.com/people/Duong.html" to see what I
mean. Because the height is only determined by my text, my image hangs
out of the container.

It's because the containing block of .container (the body) has an auto
height, which means its height depends on the height of its content.

But the percentage min-height on .container means its height depends on
the height of its container. This is therefore circular, which is why
the spec says in this circumstance, the computed value of min-height
should be 0 (this is in 10.7 of CSS 2.1).

So you can make it work by setting body to height: 100%. That way body
is the full height of the viewport, and .container is half of that.

That may cause other unwanted sideeffects though.

Firefox is a bit inconsistent though because it treats height: 50% on
..container as 50% of the viewport even with 100% set on body. Really it
should treat a percentage height the same way as a percentage min-height
here.

And yes, I use a table for the footer because I can't figure out
another way to have each phrase aligned as you see them...if anyone has
suggestions I'm all ears!

Couldn't you just use a left float and a right float?

[Ben C]

On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:

Ben C wrote:

>On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:

>>am*******@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.

[amandadev]

Guys,

Thanks for both of your inputs. I will try this last idea and let you
know how it goes. In the meantime, I'm rushing another job, so I might
not get back to this until next week.

Thanks,
Amanda
www.amandadevries.com

Ben C wrote:

On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:

Ben C wrote:

On 2006-11-15, Harlan Messinger <hm*******************@comcast.netwrote:
am*******@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.