Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorthebudman84
- CommentTimeOct 30th 2007
I am working on a page that has a repeated striped background using this image: http://i29.photobucket.com/albums/c259/thebudman84/work%20related/bgStripe.jpg
In IE6 the repeated background displays fine. But when I view it in Firefox, when my wrapper div appears on the page, it shifts the background over a few pixels making it come out of alignment. Here are two pics that highlight the problem:
IE6 Rendering: http://i29.photobucket.com/albums/c259/thebudman84/work%20related/IEBackground.gif
FF Rendering: http://i29.photobucket.com/albums/c259/thebudman84/work%20related/FFBackground.gif
I am using a web page setup that looks like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="sidebar"></div>
<div id="main">
<div id="mainContainer"></div>
</div>
<div id="footer"></div>
</div>
</body>
The image problem seems to happen as soon as the "wrapper" div is displayed on the page. Here is the CSS code for my body tag, wrapper tag, and header tag. The layout is a faux column layout (if i remember correctly) so the wrapper background is the same as the sidebar to give the appearance that the sidebar flows down with the main content of the web page:
*
{
margin: 0;
padding: 0;
}
body
{
min-width: 770px;
}
body, html
{
background-color: #4F4F4F;
background-image: url(images/bgStripe.jpg);
background-repeat: repeat;
font-family: Arial;
font-size: 10pt;
font-weight: normal;
}
#wrapper
{
background: url(images/sidebarBG.gif) repeat-y;
margin: 15px auto 15px auto;
width: 770px;
border: 2px solid #000000;
}
#header
{
background-image: url(images/cmsHeader.jpg);
height: 114px;
overflow: hidden;
border-bottom: solid 2px #000000;
}
If you need more information let me know! Thanks in advance! -
- CommentAuthorSteven Perks
- CommentTimeOct 31st 2007
You shouldn't need to put the same background image on the body and the html element. Just put it on body only and you should be fine. -
Also keep in mind that you set the body to have a
min-width of 770
and than you set #wrapper to have
width:770px;
border:2px solid #000;
that totals to 774px width. So that could be causing the problem as well. Since IE doesn't know what to do with min-width.(IE can't use min-width) It's probably not having a problem displaying your background image :D
And you shouldn't put the image on the body and html like Steven Perks said.
1 to 3 of 3