Repeat-X not working in FireFox Please Help

[jbwebdesign]

Hey everyone, I am working on some css code and I can't seem to get the background to repeat-x on mozilla but it works fine on IE. I'm not sure what i am doing wrong, please help. Here is my code:

 

/* CSS Document */
body{
background-color:#f0eff0;
margin:0;
padding:0;
width:1150px;
height:1420px;
border:none;
}
#header{
background-image:url(images/header.jpg);
background-repeat:repeat-x;
width:100%;
height:150px;
}
#nav{
background-image:url(images/navbar.jpg);
background-repeat:repeat-x;
height:58px;
width:100%;
}
#main{
background-image:url(images/main.jpg);
background-repeat:repeat-x;
width:100%;
height:1121px;
}
#container{
margin-left:100px;
width:1050px;
border:double 1px;
border-bottom:none;
border-top:none;
}
#content{
margin-left:225px;
width:575px;
}
#footer{
background-image:url(images/footer.jpg);
background-repeat:repeat-x;
height:91px;
width:100%;
padding:25px;
}
.copyright{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
text-shadow:#999999;
}

[Andrea]

Just try to combine the image and repeat lines into:

 

background: url(images/header.jpg) repeat-x;

 

and see what happens...

[jbwebdesign]

hey, i tried to combine the css just like you said and it still doesn't work. hmm.... i wonder why.... here is the new code

 

/* CSS Document */
body{
background-color:#f0eff0;
margin:0;
padding:0;
width:1150px;
height:1420px;
border:none;
}
#header{
background: url(images/header.jpg) repeat-x;
width:100%;
height:150px;
}
#nav{
background: url(images/navbar.jpg) repeat-x;
height:58px;
width:100%;
}
#main{
background: url(images/main.jpg) repeat-x;
width:100%;
height:1121px;
}
#container{
margin-left:100px;
width:1050px;
border:double 1px;
border-bottom:none;
border-top:none;
}
#content{
margin-left:225px;
width:575px;
}
#footer{
background: url(images/footer.jpg) repeat-x;
height:91px;
width:100%;
padding:25px;
}
.copyright{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
}

[Andrea]

That's weird - technically, it should work either way, but I usually combine my CSS wherever I can.

 

Ideally, you have to page uploaded somewhere and can paste a link, so we can see everything that's going on....

[jbwebdesign]

you can see the page here: http://www.textmonster.org/temp

[falkencreative]

As far as I can tell, it is working correctly.

 

You do have an issue though -- You don't need the "width="100%" on your #header, #nav, #main, and #footer divs -- They automatically have that property. Since the #footer has a "width="100%" and also left/right padding, it appears to be longer than the rest of the divs. Remove the "width=100%" from those four divs in your CSS, and that will fix the issue (and most likely fix what you think is a repeating background issue).

[shelfimage]

Right, the padding in the footer is making it expand horizontally wider than the other elements.

Also, your body CSS contains a width property. You usually want to leave the body property alone and wrap your template in a div to control the width.

 

Also, add margin:auto to your body and it will center your template nicely.