ok, managed to fix it. The problem was with your text formatting. You shouldn't add text formats to the navigation/header/content/footer div tags. (you had those with line-height, font-size etc. in the css style IDs of these tags when you shouldn't have had them in the 1st place).
The fix consists in removing those lines and adding classes for each of the elements that use text formatting. (in this case you can notice I added the "#content p" ID at the end of the css file, to format the text in the #content div.
Furthermore I then customized the .style3 class located in the #navigation div which was causing the layout drop in FF3 (Firefox3).
What I recommend is creating the main divs, and afterwards if you want to customize the text or content located in these divs, use customized CSS classes for each of these elements, as in my example when I added the .style3 class at the beginning of the css file/code you provided, to format the navigation text without making visual changes to the whole layout as in the 1st place.
Also you should know that this was only seen in Firefox3(or lower). In IE it displayed correctly because IE parses the classes/divs/styles located in the page differently than the Gecko engine that Firefox uses.
If you have any other questions feel free to ask!
copy/paste this code or study it to see what I've modified.
HTML Code:
@charset "utf-8";
.style3 {
font-size:15px;
margin: 0;
}
#wrap{
width:801px;
margin: 0 auto;
}
#header{
height:138px;
width:801px:;
background-color: red;
margin: 0;
}
#navigation{
background-repeat:no-repeat;
height:43px;
color:#000001;
width:801px;
margin: 0;
}
#content{
background-image:url(images/content.gif);
background-repeat:repeat-y;
width:801px;
margin: 0;
}
#footer{
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:87px;
text-align:center;
width:801px;
}
#content p {
margin: 0;
} [lateredit]
I may have displaced some of the paths to your background images and such, but I'm sure u can add those back with ease.