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.
Possibly relevant:
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;
}