CSS background is not working in Firefox

Good Afternoon guys,

I was wondering if you could help me figure this out.

I have a css template that works fine in IE but in firefox the background color and border don't show.

I also have a footer that displays fine in IE but in firefox it's on the right side. I need it to show on the bottom.

Here is my css code:

body{ 

	text-align: center;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
}

tr, p, div {

	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.3em;
	color:#000000;

}

ul {

	list-style:none;

}

li {

	padding-left: 25px;
	padding-top: 0;
	background-image: url(../images/arrow.png) ;
	background-repeat: no-repeat;
	background-position: 10px 5px;

}

ol{

	margin-left:40px;
	list-style-position:inherit;

}

#mainlevel-nav {
	float: right;
	font-size: 1.1em;
	color: #FFF;
	width: 600px;
	text-align: right;
	padding: 0 20px 0 0;

}



#mainlevel-nav ul { 
	font-size: 1.1em; 
	margin: 0;  
	padding: 0;
}

#mainlevel-nav li { 
	color: #fff;
	background: none;
	display: inline;
}


#mainlevel-nav li a { 
	font-weight: bold;
	color: #FFF; 
} 


#mainlevel-nav li a:hover { 
	color: #fff;
    text-decoration   : underline;

} 

.menu {

	padding-top:35px;

}

#active_menu {
	color: #523417;
	text-decoration: none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

a:link, a:visited {
	color: #76c41d;
	text-decoration: none;

}

a:hover {
	color: #523417;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	color: #523417;
	margin: 0 0 1px 0;
    text-decoration: none;
	padding-left:10px;
	line-height:25px;
	padding-right:20px;
	padding-top:10px;

}

a.mainlevel:hover {
	color: #177D17;
	background: #ffffff;

}

a.mainmenu:link, a.mainmenu:visited {
	color: #ffffff; 
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;

}

a.mainmenu:hover {
	color: #3bba4b; 

}

a.sublevel:link, a.sublevel:visited {
	font-size: 11px;
	color: #523417;
	background-color:#ffffff;


}

a.sublevel:hover {
	color: #177D17;
	text-decoration: none;

}


.contentheading {
	font: bold 1.2em Verdana, Arial, Helvetica, sans-serif;
	color: #177d17;
	text-align: left;
	margin: 0 0 10px 0;
	padding-top:10px;

}

.componentheading {
	font: bold 1.3em Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;
	margin: 0 0 10px 0;
	padding-top:10px;
}

#header {

	background: #ffffff url(../images/site_header.jpg);
	background-repeat:no-repeat;
	height: 167px;
	width:782px;
	padding:0;

}

#wrap {

	width: 782px; 
	margin:0 auto; /*center hack*/
	text-align: left;
	background: #FFFFFF;
	border: 1px solid #000000;

}

#main-body {
	float:left;
	width:100%;

}


table.moduletable_contactus {
	text-align:center;
	color: #177D17;

}


table.moduletable_contactus th

{
	font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
	color: #177D17;
	width: 100%;
	font-weight:bold;
	text-align: center;
}



table.moduletable_contactus td {
    background-color: #ffffff;
	text-align:left;
	padding: 10px ;
	color: #177D17;

}

table.moduletable_institute {
	text-align:center;
	color: #177D17;

}

table.moduletable_institute th

{

	font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
	color: #177D17;
	font-weight:bold;
	text-align: center;
}


table.moduletable_institute td {
    background-color: #ffffff;
	text-align:left;
	padding: 10px ;
	color: #177D17;
}

table.moduletable th {
	font: bold 1.1em  Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	width: 100%;
	font-weight:bold;
	padding: 3px 10px;
	text-align: left;
}

table.moduletable li {
	color: #FFF;
}

table.moduletable ul {
	padding: 0px;

}

table.moduletable td {
	font-size: 11px;
	font-weight: normal;
}

table.moduletable {
	padding: 0 0px 5px 0px;
	width: 200px;
	margin-bottom:5px;

}

table.content {
	padding: 0;
	vertical-align: top;
}

td.leftcolumn {
	width: 180px;
	vertical-align: top;
}

td.maincontent {
	width: 602px;
	vertical-align: top;
}

table.rightbox {
	width: 230px;
	border: 1;
	align: right;
	padding: 10px;
}

td.rightcolumn {
	width: 230px;
	vertical-align: top;
}

td.bottom {
	width: 612px;
	vertical-align: top;
}

.footer {

}

img {
	border:none;
}

Code (markup):

Here is the link to the site...you can view it in IE
www.homeenergydetective.com

 

Hello,

Did you tried the follow:

background-image:url (images/bg.jpg);


and

background-image: url (images/arrow.png) ;

???

Its depend where your css file is located.
Hopes this help you.

 

Thank you for you answer....but this is exactly where I"m having problems. My wrapper needs to be white and have a border. It works in IE but not in firefox. ANy ideas?

#wrap {

	width: 782px; 
	margin:0 auto; /*center hack*/
	text-align: left;
	background: #FFFFFF;
	border: 1px solid #000000;

Code (markup):

 

The CSS appears to be correct.

How are you using: id="wrap"
In your source code?