Jump to content
Stef's Coding Community
jbwebdesign

Repeat-X not working in FireFox Please Help

Recommended Posts

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



Share this post


Link to post
Share on other sites

Just try to combine the image and repeat lines into:

 

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

 

and see what happens...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...