...

View Full Version : CSS wrapper not expanding to content in Firefix



johnn7Devlpr
05-17-2007, 07:43 PM
Hi,

Ok my problem is that i am using div tableless structure, and I am using a div wrapper to vertically expand to the contents of my site from page to page.
The problem is that it doesnt want to work in fireFox , Please Help!
:confused:

Here is the link to the site : http://www.dcmconvert.com/architectural.php

view it in firefox and you will see what iam talking about ,, thanks

koyama
05-18-2007, 03:07 PM
The problem is that you have set a too small height for the box containing your flash object. Only IE6 will ignore your height and expand the box to contain overflowing elements. This bug is known as the expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html).

In most cases you shouldn't even set a height for your containers. Use the default height: auto and the height will adjust itself to fit contents.

Try these changes:


.borderbox1{
border: 1px solid #bababa;
padding: 4px;
/* height: 250px; */
background: #FFFFFF;
text-align: center;
}

johnn7Devlpr
05-18-2007, 04:30 PM
Ok thanks that worked for me, except now , my whitebackground( wrapper) isn't showing up in Firefox,, any ideas?


thanks for the help

koyama
05-18-2007, 05:25 PM
Ok thanks that worked for me, except now , my whitebackground( wrapper) isn't showing up in Firefox,, any ideas?
I don't see any background color for your wrapper?


#wrapper {
margin: 0px auto;
padding: 0px;
border:0;
width: 780px;
}

johnn7Devlpr
05-18-2007, 06:55 PM
Ya its not in wrapper its in the #container div

koyama
05-18-2007, 07:20 PM
Ya its not in wrapper its in the #container div
That's because a float does not automatically expand its containing block. Only in IE does this happen (due to a bug) when hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) is triggered for the containing block (for example by setting an explicit width).

If you want #container to contain its floats, you can achieve this by specifying overflow: hidden (http://www.quirksmode.org/css/clearing.html)


#container {
position: relative;
left: 6px;
width: 774px;
border-left: 1px solid #999999;
border-right: 1px solid #999999 ;
background-color:#FFFFFF;
overflow: hidden;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum