I've got a fixed central layout, with a container holding a header, main, and footer div floated.

 

In Firefox unless I set a defined height e.g. 900px then the container doesn't stretch behind the page elements so the background doesn't show up.

 

height:100% and min-height:100% works in IE 6 and 7 but not in Firefox.

 

Can anyone help me out with this problem.

 

thanks

 

Andy

I've got a fixed central layout, with a container holding a header, main, and footer div floated.

 

In Firefox unless I set a defined height e.g. 900px then the container doesn't stretch behind the page elements so the background doesn't show up.

 

height:100% and min-height:100% works in IE 6 and 7 but not in Firefox.

 

Can anyone help me out with this problem.

 

thanks

 

Andy

 

I fixed it by adding a conditional comment targeting non-IE browser:

 

<!--[if !IE]><!-->

<style type="text/css">

#container {overflow:hidden;}

</style>

<!--<![endif]-->

 

Probably not the prettiest solution. But it works.

Darn it!

 

Yeah man, I had an issue with FF/IE and everytime I would shorten the height of a column to align in FF, IE would go all over the place. Using seperate styles is a more than viable option my friend