CSS Misbehaviour

[Kon-Tiki]

My CSS's being an @$$. I have these as divs:

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');
}

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?

[cloudee1]

Because Firefox ain't all that ;D

Kon I have had the same problem once when i was trying out a truly tableless design. Granted mine didn't stand out quite like yours does because my issue appeared behind the menu which was the shorter of the two columns, but I still saw it and that was enough. I wrestled with it and wrestled with it and the best way I finally came up with to insure that this type of cross-browser problem doesn't occur is, your not going to like this part, use a table. Besides it keeps the flow better when you resize the window that way too.

[Kon-Tiki]

Actually, I got it fixed 'bout... 16h ago ;D Got to use the min-height argument to set the shortest div to a minimum length, so it'll fill the whole up.