Firefox Ignoring Height

BoulderBum · Jul 25, 2006

This is driving me nuts.

I have a div with style.height set to 100%. It works fine with IE and with FireFox until I introduce a DOCTYPE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

After that, the DIV goes nuts and ignores the height I set for it.

Here's the thing, I set the html and body tags both to have heights of 100%; if I set the background color of the body, I can see that it does indeed fill the page (though the div does not).

Oh, and if I remove the DOCTYPE, it works with FireFox, but not in IE. Arrrggg!

Any ideas?

Foamcow · Jul 26, 2006

Have a read of this

http://www.quirksmode.org/css/100percheight.html

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

cLFlaVA · Jul 26, 2006

fyi: the doctype you specified is not a complete one. have a look at some common, complete doctypes:

http://www.w3.org/QA/2002/04/Web-Quality

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

BoulderBum · Jul 26, 2006

Thanks for the replies.

Foamcow, I actually read that and, as noted, the body and html elements both have heights set to 100%: that's what's driving me nuts! It still doesn't work!

cLFlaVA, I actually had a more complete doctype, but ended up changing in in my experimentations (in fact, I think I ripped my latest doctype off from the article Foamcow linked to).

Any other ideas?

cLFlaVA · Jul 26, 2006

the answer is simple: you cannot have an an element with 100% height if its parent element does not have a static height.

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Firefox Ignoring Height

BoulderBum

Programmer

Foamcow

Programmer

cLFlaVA

Programmer

BoulderBum

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor