Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS - Mozilla doesn't recognise % values for height eg. height:40%;

Options
  • 22-08-2006 5:20pm
    #1
    myownslave
    Closed Accounts Posts: 39 ✭


    height:40%;
    IE will display the div correctly - 40% of the height of the browser window.
    But Mozilla doesn't seem to recognise a % value and just sets the height of the div to automatically fit the amount of text in it.
    If I set the height:40px; then Mozilla will recognise this alright and will set the height of the div to 40 pixels.

    This only happens when using relative positioning - using absolute positioning, Mozilla does seem to recognise height:40%;

    Here's my code:

    <?XML version="1.0" encoding="UTF-8"?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd"&gt;

    <HTML xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en">

    <HEAD>
    <META http-equiv="Content-Type" content="application/xhtml+xml;
    charset=UTF-8"/>
    <TITLE>THE FENIANS GAA CLUB - News</TITLE>
    <META name="Author" content="Jim Broderick"/>

    <STYLE type="text/css">

    BODY {
    margin:15px 0px;
    border:0;
    padding:0px;
    width:100%;
    height:100%;
    max-height:100%;
    background:#000099;
    text-align:center;
    font-family:arial, verdana, sans-serif;
    font-size:0.8em;
    overflow:auto;
    }

    #HEADER {
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    margin-top:0px;
    margin-bottom:15px;
    height:90px;
    overflow:hidden;
    background:#FFFFFF;
    }

    #MENU {
    padding:0px;
    top:0px;
    margin:0px auto;
    margin-bottom:15px;
    height:25px;
    width:764px;
    overflow:hidden;
    background:#000099;
    text-align:center;
    }

    #CONTENT {
    top:0px;
    margin:0px auto;
    width:764px;
    height:74%;
    padding:15px;
    background:#FFFFFF;
    text-align:left;
    text-indent:40px;
    overflow:auto;
    }

    </STYLE>

    </HEAD>

    <BODY>

    <FONT color="#000000" face=Verdana>

    <DIV id="HEADER">
    Page Header
    </DIV>

    <DIV id="MENU">
    Horizontal Menu
    </DIV>

    <DIV id="CONTENT">
    Content Area
    </P>
    </DIV>

    </FONT>
    </BODY>

    </HTML>


Comments

  • Options
    #2
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    This seems to work in both browsers..
    #CONTENT {
top:0px;
margin:0px auto;
width:764px;
padding:15px;
background:#FFFFFF;
text-align:left;
text-indent:40px;
overflow:auto;

position : absolute;
top : 150px;
left : 12%;
right : 12%;
height : 74%;

}


  • Options
    #3
    myownslave
    Closed Accounts Posts: 39 ✭myownslave


    Sorry Goodshape, but that messes up the width and hirozontal positioning of the CONTENT DIV for me. Even after tweaking the values to put it back in the centre, it messes up again if the browser window is resized at all.


  • Options
    #4
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    I'm not sure I understand the problems you're having, but have you tried setting the width of the content div to 70% or something like that ? (basically 100% minus the div's left and right values and margins).


Advertisement