Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

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

  • 22-08-2006 05: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

  • #2
    Goodshape
    Registered Users, Registered Users 2 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%;

}


  • #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.


  • #4
    Goodshape
    Registered Users, Registered Users 2 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