Firofox format problem

[hemy2000]

Hi Im having a problem with my products page showing correct on firefox, it works right on ie6 but not on firefox. Heres the url-www.hxtreme.byethost31.com/products.php
And heres the stylesheet. Cheers..Tom....
body{
font-family: Arial, Helvetica, sans-serif;
width: 760px;
color: #333333;
font-size: 80%;
line-height: 1.166;
margin: auto;
background-color: #CADDFE;
}
h1{
font-size: 18px;
font-style: bold;
}
h2{
color: #999999;
font-size: 16px;
font-style: italic;
}
h3{
color: #FF9900;
font-size: 14px;
font-style: bold;
}
#header{
width: 97.5%;
height: 70px;
border-top: solid #000000 1px;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 1px;
padding-right: 1.25%;
padding-left: 1.25%;
background-image: url(images/background/header.gif);
background-repeat: repeat;
}
.logo_{
float: left;
padding-left: 65px;
}
.ads_{
float: right;
padding-top: 5px;
padding-bottom: 5px;
}
#navigation{
text-align: center;
width: 97.5%;
height: 20px;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 1px;
padding-right: 1.25%;
padding-left: 1.25%;
background-image: url(images/background/navigation.gif);
background-repeat: repeat;
}
#content{
width: 97.5%;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
background-color: #FFFFFF;
padding-right: 1.25%;
padding-left: 1.25%;
}
.title{
border-bottom: dashed #F3F3F3 2px;
text-align: center;
padding-top: 1px;
padding-bottom: 1px;
}
.full_{
padding-top: 2px;
padding-bottom: 2px;
}
.custom{
text-align:center;
padding-top: 2px;
padding-bottom: 2px;
}
.contact{
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
}
#content2{
width: 97.5%;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
background-color: #FFFFFF;
padding-right: 1.25%;
padding-left: 1.25%;
}
.desc{
float: left;
padding-top: 2px;
padding-bottom: 2px;
}
.picprice{
float: right;
text-align: right;
padding-top: 20px;
padding-bottom: 2px;
}
#footer{
width: 97.5%;
height: 40px;
border-top: solid #000000 1px;
border-bottom: solid #000000 1px;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
padding-right: 1.25%;
padding-left: 1.25%;
background-image: url(images/background/footer.gif);
background-repeat: repeat;
}
.foot_{
float: left;
padding-left: 50px;
text-align: center;
padding-top: 7px;
padding-bottom: 8px;
font-size: 80%;
}
.left{
float: left;
padding-top: 5px;
padding-bottom: 3px;
}
.right{
float: right;
padding-top: 5px;
padding-bottom: 3px;
}

[homchz]

can we see the HTML.

You are not clearing your floats, the easiest way I know of around this is to creatre a new div called.

.clear{
clear:both;
font-size:1px;
}


Then place this line just above the closing </div> for your layer containing all the floats.

<div class="clear">&nbsp;</div>


Josh

[hemy2000]

That fixed it, I did the clear thing you said and it worked perfect. Your a genius. Cheers