My CSS Navbar works in IE but Not Firefox! Help!

Here is the code for my navbar:


HTML CODE EXAMPLE:

I tested this sample code in both IE7 and FF 3.0.5 and it appears the same to me.

Yeah, that's because the style sheet isn't attached. I'm using an image for the rollover effect.

But you've never heard of any css problems with firefox before?

usually it's ie that makes the problems. it would be easier to check what's wrong if you gave us a link to a full live example to work with?

Ok. Here's a link to the website. Check it with IE and Firefox and you'll see what I mean.

http://www.austinclassicalballet.com/new/

Thanks.

Here's the style sheet I'm using.

/* BODY */

body, div, img, p, h1, h2, h3, ul, li { margin: 0; padding: 0; }

h1, h2, h3 { font-size: 100%; }

body {
background-color:#000000;
}

a { overflow: hidden; }


/* HEADER */

#header {
width: 650px;
height: 103px;
margin: 0px auto;
border-bottom: 1px solid black;
}

/*
h1 a {
width: 550px;
height: 65px;
display: block;
text-indent: -9999px;
}
*/
/* CONTENT */

#content {
width: 650px;
margin: 0 auto;
background-color:#ffffff;
}

/* CLASSINFO PAGE */

#classes li {
margin: 0 0 0 10px;
list-style-type: none;

}

#classes h3 {
/*font-size: 1.2em;*/
text-decoration: underline;
}

#achievements li {
margin: 0 0 0 20px;
list-style-type: disc;
}

/* MAIN */

#main {
float: right;
width: 478px;
height: 800px;
background-color: #FFFFFF;
padding: 0 1px 0 0;


}

#maintext {
font-family: Garamond, Verdana, Arial, sans-serif;
font-size:18px;
text-align:left;
}

#maintext p {
/* text-indent: 1.25em; */
text-indent: .25em;
line-height: 1.3em;
/*margin: 1em 0;*/
margin: 0 0 0 5px;
}

.centeredImage {
text-align:center;
margin-top:5px;
margin-bottom:0px;
padding:0px;
}

#address {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
}

/* PAGE TITLES */

#pagetitle {
font-family:Garamond, Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
text-align: left;
padding: 0 0 0 5px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666666;
}


/* NAVIGATION */

#navigation {
float: left;
clear: left;
width: 170px;
height: 800px;
text-align: left;
border-right: 1px solid #000000;
background-color:#CDB1A2;
}

#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigation ul a{
display: block;
width: 170px;
height: 40px;
line-height: 36px;
color:#000000;
text-decoration: none;
background-image: url(images/new site/button.jpg) no-repeat left;
text-indent: 35px;
}

#navigation a:hover{
background-position: right;
color: #fff;
}




/* FOOTER */

#footer {
font: 0.77em Garamond, Verdana, sans-serif;
color:#FFFFFF;
width: 650px;
/*height: 12px; */
margin: 0 auto;
padding: 3px 0 0;
text-align: center;
clear: both;
}


#footer a{
color:#FFFFFF;
text-decoration: none;
}

I solved the issue by the following:

This is defined wrong in the #navigation ul statement:
background-image: url(images/new site/button.jpg) no-repeat left;

Here's the correct definition:
background-image: url(images/button.jpg);
background-repeat:no-repeat;
background-position: left;

Now it works in both IE and Firefox.

You can still combine the three background attributes; just use 'background' instead of 'background-image', put single quotes around the image filename, and switch your ordering slightly: