 the well known height bug in firefox
ok, so what happens when html height is 100%, body height is 100%, every singly height i can find is 100%! but in firefox, 100% STILL remains only the height of the viewing window, so once you scroll down the pretty little background colours disappear?
can anybody offer any help as to why my left and right side panels don't stretch ALL the way down in firefox, and instead fill only one screenful?
I've tried using min-height to ff and using /height to give a different height to ie. but a) this doesn't work and b) i don't really understand the logic behind it so i figure it's best if i don't use it!
Doctype I'm using: <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(I use this one for no particular reason - it's just what I normally work with).
css:
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 75% geneva, arial, helvetica, sans-serif;
color: #333;
height:100%;
}
.container { /* contains all 3 divs */
width: 100%;
height: 100%;
}
.left { /* side panel on the left, contains a background image */
width:5%;
min-height: 100%;
/height: 100%;
float: left;
position: relative;
background-color: red;
background-image: url(images/bgPanelSides.gif);
background-repeat: repeat-y;
background-position: right;
}
.leftTop { /*sits at top of left side panel, has a bg image which matches the height of the header */
height: 157px;
background-image: url(images/bgPanelTop.gif);
background-repeat: repeat-x;
width: 100%;
position:absolute;
top: 0;
left: 0;
}
.right { /*side panel on right */
width:5%;
min-height: 100%;
/height: 100%;
float: left;
position: relative;
background-color: red;
background-image: url(images/bgPanelSides.gif);
background-repeat: repeat-y;
background-position: left;
}
.rightTop { /*sits at top of right panel, contains a bg that matches the header */
height: 157px;
background-image: url(images/bgPanelTop.gif);
background-repeat: repeat-x;
width: 100%;
position:absolute;
top: 0;
right: 0;
}
.centre { /*all my text sits in here */
width: 90%;
background-color:blue;
float: left;
position: relative;
}
</style>
HTML
<div class=container>
<div class="left">
<div class="leftTop"></div>
</div>
<div class="centre">This is where all my text etc goes </div>
<div class="right">
<div class="rightTop"></div>
</div>
</div>
Started By meriwa on Sep 6, 2005 at 2:05:39 AM | 
