Problem with banner graphic in FF

jvnderwe · 05-30-2009, 04:12 PM

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.

Code:

<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>

Code:

.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:

Code:

* {
	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 · 05-31-2009, 02:57 AM

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 · 05-31-2009, 04:31 AM

have you tried

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

?

jvnderwe · 05-31-2009, 04:09 PM

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.

05-30-2009, 04:12 PM	#1
jvnderwe New Member Join Date: May 2009 Posts: 11	Problem with banner graphic in FF 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. Code: <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> Code: .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: Code: * { 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; } Attached Images

05-31-2009, 02:57 AM	#2
AusQB Silver Member Join Date: Jul 2008 Location: Perth, Australia Posts: 167	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. __________________ RGG Web Designs

05-31-2009, 04:31 AM	#3
adamblan Silver Member Join Date: Aug 2008 Location: Lake Tahoe Posts: 235	have you tried html, body { margin: 0px; padding: 0px; } ? __________________ <ablank.us>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-31-2009, 04:09 PM	#4
jvnderwe New Member Join Date: May 2009 Posts: 11	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.