Background Issue

[Chris73]

I was testing a background done in CSS. My question is why will the container background show up in IE but not firefox? Is there a way to fix this or what?

I just find it odd that the main background will work but the container background doesn't.

Here is the css.
"#main {
background-image:url(images/main_bg.gif);
background-repeat: repeat-y;
display:block;
width:768px;
height:auto;
}
#content {
background-image:url(images/content_bg.gif);
background-repeat: repeat-y;
width:768px;
}"

[Brandon]

What is the full HTML code you are using?

[Chris73]

Posted the wrong code. I am assuming you meant all of the CSS.




body {
background-image:url(images/background.gif);
color: #000000;
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 12px;
margin: 0px;
padding: 0px;
}
* {margin: 0px;padding: 0px;}
.clear{clear:both;}
#container {
margin: 0px auto;
text-align: left;
width: 780px;
}
a {
color: #000000;
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 12px;
}
/********************** Header ***************************/
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
width:768px;
height:262px;
}
#menu {
position:relative;
background-image:url(images/menu.jpg);
background-repeat:no-repeat;
width:768px;
height:117px;
}
#menu ul{
position:absolute;
top:30px;
left:265px;
}
#menu li{
float:left;
display:inline;
padding: 0px 0px 0px 10px;
}
#menu a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
text-transform: uppercase;
color: #d8cd8d;
text-decoration: none;
}
#menu a:hover{
color:#3e3c27;
}
h1,h2,h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
color: #171508;
}
h1,h2 {
position:absolute;
top:94px;
}
h1 {
left:241px;
}
h2 {
right:75px;
}
h3 {
margin: 15px 0px 0px 30px;
border-bottom: solid 1px #625d3b;
}
/********************** Main ***************************/
#main {
background-image:url(images/main_bg.gif);
background-repeat: repeat-y;
display:block;
width:768px;
height:auto;
}
#content {
background-image:url(images/content_bg.gif);
background-repeat: repeat-y;
width:768px;
}
/********************** Left - Text ***************************/
#left {
float:left;
width:490px;
}
#left p{
padding: 5px 10px 10px 30px;
}
#left a:hover{color:#d8cd8d;}

/********************** Right - Team ***************************/
#right {
float:right;
width:230px;
}
.member {
display:inline;
float:left;
margin-left:10px;
}
.member a{
font-size: 12px;
font-weight: bold;
color: #f5f1d1;
text-decoration: none;
}
.member img{
border: none 0px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;

}
.member span a{}
.member span a:hover{}

/********************** Footer ***************************/
#footer {
background-image:url(images/footer_bg.jpg);
background-repeat:no-repeat;
width:768px;
height:97px;
text-align:center;
float:left;
clear:both;
}
#footer ul{

}
#footer li{
display:inline;
float:none;
text-align:center;
padding: 0px 10px 0px 10px;
border-right: solid 1px #908a68;
}
.lastchild{
border-right: 0px none !important;
}
#footer a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform:uppercase;
color: #908a68;
text-decoration: none;
}
#footer a:hover{text-decoration: underline;}
#footer span{
font-size: 9px;
font-weight: bold;
color: #18160e;
margin:10px;
display:block;
}

[Corey]

Do you have firebug and webmaster tools installed as extensions to FF? These would probably help you figure out your issue.

-Corey

[Chris73]

No, but i guess it couldn't hurt to add them. It was brought to my attention that the page looked different via IE than it did in FF. I am trying to figure out how to fix it without requiring everyone who views that page to install additional addons just to view the page correctly.

[Brandon]

What I do when that happens, make sure there are no errors with at http://validator.w3.org/, it will in most cases fix my errors.

[Chris73]

Yea i make sure that when i am done i use the validator. I would get down to a few errors that i can't fix or know how to.. tried html tidy which just totally removes the <divs> has my page all wacked. LOL


Ok then thanks for your help, i am sure with some time and patience i will figure it out.

[Brandon]

What are a few of the errors you can't fix, we might be able to help.

[Chris73]

They are all attribute errors.

[Corey]

Moving to site management.