Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > css problem - height 20% doesn't work in Firefox

Reply
Thread Tools

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

 
 
John Paul
Guest
Posts: n/a
 
      10-13-2006
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


 
Reply With Quote
 
 
 
 
Ed Mullen
Guest
Posts: n/a
 
      10-13-2006
John Paul wrote:
> 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?
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      10-13-2006
On 2006-10-13, John Paul <(E-Mail Removed)> wrote:
> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
textbox height different than input height tshad ASP .Net 1 03-08-2007 10:04 PM
measuring web controls height at runtime (or converting .height % to px) Wotney ASP .Net 1 10-25-2006 01:39 PM
how to get specific cell height without hard-coding a height value laredotornado@zipmail.com HTML 0 08-19-2006 08:13 PM
CSS - IE/Firefox problem - element height matt@mailinator.com HTML 3 01-17-2006 07:20 PM



Advertisments