floating div problem in Mozilla

[kiwidesign]

Hi all,
I have a php page which is width:800 and centered on the page. It includes a header php file which has a logo then a set of icons. This displays fine in IE but in mozilla it is pushing the icons underneath the logo. How can I fix this?

CSS
#content{
/* text-align is inherited; reset it */
width:800px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#content-wrapper{
text-align:center;
}
#rheellogo{
float:left;
width:200px;
}

#icons{
padding-left:20px;
float:left;
clear:right;
}
#horzline{
clear:both;
text-align:center;
padding-top:5px;
}

.icontitle{
font-family:"Copperplate Gothic Light", Arial;
font-size:18px;
font-weight:bold;
color:#151269;
text-align:center;
}

HTML (in header php file)
<div id="rheellogo">
<img src="../images/logos/rheel group.jpg" alt="Rheel Logo" width="200"/>
</div><div id="icons">
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td width="20%"><div align="center"><img src="../images/people/Client.png" alt="Clients" width="75" height="97" /></div></td>
<td width="20%"><div align="center"><img src="../images/people/Purchases.png" alt="Purchases" width="75" height="97" /></div></td>
<td width="20%"><div align="center"><img src="../images/people/Stock.png" alt="Stock" width="75" height="97" /></div></td>
<td width="20%"><div align="center"><img src="../images/people/Admin.png" alt="Admin" width="75" height="97" /></div></td>
<td width="20%"><div align="center"><img src="../images/people/Invoices.png" alt="Invoices" width="75" height="97" /></div></td>
</tr>
<tr class="icontitle">
<td>Client</td>
<td>Purchases</td>
<td>Stock</td>
<td>Admin</td>
<td>Invoices</td>
</tr>
</table>
</div>
<div id="horzline">
<img src="../images/horzline.gif" alt="Horizontal Line" width="800" height="2" /></div>

Any help would be greatly appreciated

[DrDoc]

Well ... your logo is 200px wide, then there's a container with 20px padding which contains a 600px wide element ...
That does not equal 800px.

[kiwidesign]

Thanks for your help.

I'm getting confused with margins, padding etc I thought that padding didn't count in the total width i thought it behaved more like an indent.

How would I achieve the indent and still keep the 800 wide?

Kiwidesign

[doodlebee]

Mozilla displays margins and padding differently than IE does. For example, if you have a 200 pixel wide div, and a 200pixel wide image, and want 20 pixels all around the image, Mozilla would render it like so:

200px (image) + 20px (on left) + 20px (on right)= 240px.

Your div would be 240pixels wide in Mozilla.

However, IE does this:

200px (div width) - 20px - 20px = 160px wide for your div width. However, the image would either be cut off or would shove the div out wider, depending on how you use the image.

IE *also* adds in a 3px margin around images that frustrates a lot of people.

Get it right in Mozilla first, then adjust your margins and padding with a conditional comment.

As for th eimage size, you're eithergoing to have to set it as a background (whcih will cut off the image) or simply make it smaller if you *really* must keep that padding. If it were me, I'd just get rid of the padding.

[kiwidesign]

Hi,

Thanks for the tips. I got rid of the padding it seemed the easiest fix.
Can you tell me how i do conditional formatting in the css.

Cheers
Kiwidesign

[doodlebee]

<!--[if IE]>
<style type="text/css">
stuff here
</style>
<![endif]-->

FOr more info, google "conditional comments" and tons of stuff comes up.

[kiwidesign]

Thankyou very much for you help.

Kiwidesign