Background Issue

Chris73

New Member
Messages
5,356
Reaction score
1
Points
0
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;
}"
 
Last edited:

Brandon

Former Senior Account Rep
Community Support
Messages
19,181
Reaction score
28
Points
48
What is the full HTML code you are using?
 

Chris73

New Member
Messages
5,356
Reaction score
1
Points
0
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;
}
 
Last edited:

Corey

I Break Things
Staff member
Messages
34,553
Reaction score
204
Points
63
Do you have firebug and webmaster tools installed as extensions to FF? These would probably help you figure out your issue.

-Corey
 

Chris73

New Member
Messages
5,356
Reaction score
1
Points
0
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.
 
Last edited:

Chris73

New Member
Messages
5,356
Reaction score
1
Points
0
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

Former Senior Account Rep
Community Support
Messages
19,181
Reaction score
28
Points
48
What are a few of the errors you can't fix, we might be able to help.
 

dyfuse

Member
Messages
395
Reaction score
0
Points
16
Is it possible that you give us a link to the suspect page? Providing the CSS code is one thing, but to get a visual of the problem is another.

Also, the CSS code you use may be perfectly fine, but the HTML code that you have in your webpage may be the cause of the error. Some CSS attributes tend to work better with particular HTML tags.
 
Top