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

myownslave · 22-08-2006 4:20pm #1

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">

<HTML xmlns="http://www.w3.org/1999/xhtml" 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>

Goodshape · 22-08-2006 4:53pm

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%;

}

myownslave · 22-08-2006 5:31pm

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.

Goodshape · 22-08-2006 6:14pm

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).

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

Comments