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

Discussion in 'HTML' started by John Paul, Oct 13, 2006.

  1. John Paul

    John Paul Guest

    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
    John Paul, Oct 13, 2006
    #1
    1. Advertising

  2. John Paul

    Ed Mullen Guest

    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?
    Ed Mullen, Oct 13, 2006
    #2
    1. Advertising

  3. John Paul

    Ben C Guest

    On 2006-10-13, 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.


    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.
    Ben C, Oct 13, 2006
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    14,630
  2. Replies:
    0
    Views:
    543
  3. Wotney
    Replies:
    1
    Views:
    520
    Flinky Wisty Pomm
    Oct 25, 2006
  4. MZ
    Replies:
    7
    Views:
    812
    Ed Mullen
    Mar 17, 2008
  5. DaveO

    Height Code doesnt work with FireFox

    DaveO, Aug 5, 2005, in forum: Javascript
    Replies:
    0
    Views:
    79
    DaveO
    Aug 5, 2005
Loading...

Share This Page