css problem - height 20% doesn't work in Firefox

J

John Paul

How do you specify the height as a percentage and get it to work in Firefox?

Here is my CSS:

#test{
width:100%;
background: red;
height: 20%; /*this doesn't work in FireFox */
}

Here is my HTML:

<div id="test">
</div>

Works in IE but not in Firefox.

Thanks
 
E

Ed Mullen

John said:
How do you specify the height as a percentage and get it to work in Firefox?

Here is my CSS:

#test{
width:100%;
background: red;
height: 20%; /*this doesn't work in FireFox */
}

Here is my HTML:

<div id="test">
</div>

Works in IE but not in Firefox.

Thanks

The div is empty. You could do:

<div id="test">
&nbsp;
</div>

If you'd describe what you are actually trying to accomplish you'll get
better responses. ;-)

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Why do we drive on parkways and park on driveways?
 
B

Ben C

How do you specify the height as a percentage and get it to work in Firefox?

Here is my CSS:

#test{
width:100%;
background: red;
height: 20%; /*this doesn't work in FireFox */
}

Here is my HTML:

<div id="test">
</div>

Works in IE but not in Firefox.

You can't effectively set a percentage height unless the containing
block has a height set on it.

If you put

<div style="height: 200px">
</div>

around your test it will work.

This is because the height of a block box depends on its content. So for
the content to say it wants to be some percentage of its container is
considered circular.

It's like saying, Anne is the same age as Bryan and Bryan is 20% of the
age of Anne, how old is Bryan?

This is in section 10.5 of the CSS 2.1 spec:

If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to ’auto’.

Also check 10.1 (definition of containing block)-- if you make your div
position: absolute or position: fixed it becomes 20% of the viewport
height.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top