OK in IE but not in Firefox

[john noble]

Here is the site (http://www.frba.co.uk/)

The bottom half of the box down the right side seems to be showing the background image correctly in IE but not in Firefox.

I think it might be a height issue. When I set a height to the box class then it begins to appear. But because there is content inside the box class then the height would be dynamic???

Here is the code:

<div id="right-col">
<div class = "box">
<h3>Up and coming Events</h3>
<div id = "picturelist">
<dl>
<dt>Gourmet Meal</dt>
<dd class = "img"><img src = "images/lighthouse.jpg" width = "80" height = "80" alt = "Lighthouse Meal"></dd>
<dd>Come along to the Museum of Scottish Lighthouses for a gourmet meal...</dd>
</dl>
<dl class = "alt">
<dt>Ten Pin Bowling</dt>
<dd class = "img"><img src = "images/bowling.jpg" width = "80" height = "80" alt = "Ten Pin Bowling Find Raiser"></dd>
<dd>Enter your company as a team in our Fund Raiser for the...</dd>
</dl>
</div>
</div>


and the CSS



#right-col {
margin-left: 445px;
text-align: left;
padding-left:15px;
}


/*box */
.box {
width: 235px;
background: url(../images/div-bottom.gif) no-repeat bottom left;
margin-bottom: 15px;
}

.box h3{
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #333;
font-weight:bold;
border-bottom: 1px solid #E0CFAB;
background: url(../images/h3-bg.gif) no-repeat top left;
}
.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}

.box ul li{
margin: 0 0 6px;
padding: 0;
}


#picturelist{
width: 235px;
padding: 5px 0;
/*border: 1px dashed #C8CDD2;*/
float: left;
}

#picturelist dl{
float:left;
width: 215px;
margin: 10px 10px;
padding: 0;
display: inline; /* fixes IE/Win double margin bug */
}

#picturelist dt{
float: right;
margin: 0;
padding: 0;
font-size: 110%;
color: #627081;
width: 117px;
}

#picturelist dd{
margin: 0;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}

#picturelist dd.img img{
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}

/* reverse float */
#picturelist .alt dt{
float: left;
}

#picturelist .alt dd.img img{
float:right;
margin: 0 0 0 8px;
}



J

[Fang]

Clear the floats:.box {overflow:hidden;}

[john noble]

I don't really understand what it has done but it works.

Thanks again for your help.

J

[Fang]

You can see the problem if you initially give .box {border:1px solid red;}
In Fx the border does not wrap the floats.
Now add the overflow:hidden;

[drhowarddrfine]

Elements are NEVER to extend to contain floats. This is a bug in IE. Firefox is performing correctly. What Fang is showing is how to get modern browsers to duplicate IEs bug.