CSS Misbehaviour
Posted: Sat Feb 18, 2006 11:00 am
My CSS's being an @$$. I have these as divs:
The menu- and contents-divs are subdivs of the middle-div. Now, in IE, it shows the layout as it should be shown: the contents's there, and all the parts that don't have contents, are filled up with the background image, while when the contents's bigger than the menu, it'll properly enlarge the middle div.
In Firefox, for some reason, the middle-div refuses to show the background, and the contents-div shows it instead, leaving a nice white gap between the contents-div and the footer when the contents's smaller than the menu. A clear view of what it looks like, with a box 'round each div, can be found here.
So my question is: Why's it passed that background on to a subdiv in Firefox?
Code: Select all
div.header {
background-image:url('img/header.png');
width: 1024px;
height: 343px;
}
div.middle {
background: url('img/kwmainbar.png');
top: 365px;
left: 8px;
width: 1013px;
height: auto;
}
div.menu {
padding-left: 10px;
float: left;
}
div.contents {
padding-left: 133px;
padding-right: 133px;
text-align: justify;
}
div.footer {
clear: left;
top: 343px;
left: 0px;
width: 1016px;
height: 147px;
background-image:url('img/footer.png');
}
In Firefox, for some reason, the middle-div refuses to show the background, and the contents-div shows it instead, leaving a nice white gap between the contents-div and the footer when the contents's smaller than the menu. A clear view of what it looks like, with a box 'round each div, can be found here.
So my question is: Why's it passed that background on to a subdiv in Firefox?