Problem with banner graphic in FF

[jvnderwe]

Hi guys, I was wondering if anyone could help me with a strange problem I'm having with displaying a banner graphic in firefox. Forgive me if this is a stupid question, I'm relatively new to web design.

I want the banner graphic to span the entire width of my content area. The content area is 900px wide and the graphic is 900px wide, yet in FF there is a 1px space on the left edge. In other browsers like IE7 and Safari, it displays perfectly. I've attached a screenshot.

Does anyone have any theories about why this is happening only in FF? Thank you.

Here is the section of code and some CSS rules. Above this section is all the code for my header and navigation bar. The "contentWrapper" div is for the textured background graphic; the "content" div is a 900px wide div that holds all the body content of the page; the "container" div is just there so it's background graphic creates a faux column for the sidebar that always goes down to the bottom of the page regardless of the amount of content in the sidebar; and the "mainContent" div obviously contains all the text on the page. Hopefully that makes sense.

<div id="contentWrapper">
  <div id="content">
    <img src="_images/banner_studies.jpg" alt="studies section banner" width="900" height="150" class="subBanner" />
    <div id="container">
      <div id="mainContent">
        <h1>articles</h1>

.subBanner {
	margin-bottom: 20px;
}
#contentWrapper {
	background-image: url(../_images/texturebg.jpg);
	background-repeat: repeat-y;
	background-position: center;
}
#content {
	background-color: #e6e0d4;
	width: 900px;
	margin: 0 auto;
	text-align: left;
}
#container {
	float: left;
	background:url(../_images/subnav_body.gif) repeat-y top right;
	width: 900px;
}

#mainContent {
	float: left;
	width: 600px;
	padding: 0 0 20px 25px;
}

Possibly relevant:

* {
	margin: 0px;
	padding: 0px;
}
#navWrapper {
	background-image: url(../_images/mainnavbg.jpg);
	text-align: left;
	height: 32px;
	border-bottom: 1px solid #453b23;
}
#nav {
	width: 900px;
	margin: 0 auto;
	list-style: none;
	line-height: 32px;
}

 

[AusQB]

Two options:

1. Add border: 0; to the reset elements

2. Change from an image to a div with a background image


That's all I can really think of. If you've uploaded the site can you give us a url. It's much easier to diagnose if I can view it in the browser.

 

[adamblan]

have you tried

html, body {
margin: 0px;
padding: 0px;
}

?

 

[jvnderwe]

I tried the suggestions above but nothing worked. I did finally discover the problem though. I made that textured background image with a 900px space in the middle where the content would go, but for some reason firefox (and only firefox) was placing the image 1px too far to the left leaving a space. So I remade the background image and moved the left side over 1px so there is now only a 899px space, and there is no gap in any browser. Thanks for the help.