Date: 11/13/06 (Web Development)    Keywords: css, html, web

Hi Guys, I'm trying to figure out what is breaking up my css on Firefox, I can't see anything out of the ordinary going on here. Please see code & screenshots behind the cut



it works well in IE:


but not so well in FF: (note the breaks in the images)



here is my CSS:

body {
background-color: #370F16;
}

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 800px;
}

#header {
margin: 0;
}

#side-a {
float: left;
width: 98px;
}

#side-b {
float: right;
width: 96px;
}

#content {
float: left;
width: 75%;
margin: 0px;
}

#footer {
clear: both;
background: #A2A2A2;
margin: 0px;
}

#menu {
width: 606px;
}

#main {
margin: 0px;
background-image: url(images/indi_11.gif);
overflow: auto;
height: 438px;
background-repeat: repeat-x;
width: 100%;
}


and here is my HTML:

<div id="wrapper"> <div id="header"><img src="images/indi_01.gif" width="800" alt="Header" /></div> <div id="container"> <div id="side-a"><img src="images/indi_02.gif" width="98" alt="background" /></div> <div id="content"> <div id="menu"> <img src="images/indi_03.gif" alt="Services" width="82" height="29" border="0" id="Image1"/> <img src="images/indi_04.gif" width="4" height="29" alt="spacer" /> <img src="images/indi_05.gif" alt="Portfolio" width="82" height="29" border="0" id="Image2" /> <img src="images/indi_06.gif" width="270" height="29" alt="Logo" /> <img src="images/indi_07.gif" alt="About Us" width="82" height="29" border="0" id="Image3"/> <img src="images/indi_08.gif" width="4" height="29" alt="Spacer" /> <img src="images/indi_09.gif" alt="Contact" width="82" height="29" border="0" id="Image4"/> </div> <div id="main"> <p>Welcome to Indi Web & Graphic Design!</p> </div> </div> <div id="side-b"><img src="images/indi_10.gif" width="96" alt="Background" /></div> </div> <div id="footer"><img src="images/indi_12.gif" width="800" height="43" alt="Footer"></div> </div>

Can anybody see the culprit? I've tried playing around with all margins etc around the header and footer (which is where the lines seem to appear) but to no avail. ..

thanks in advance :)

Source: http://community.livejournal.com/webdev/368743.html