Help with CSS Navigation

[austinohara]

I noticed my navigation on a site I built, www.houseofhunger.com, does not work in IE and I'm unsure of why. I tried playing around with it but no luck. It works fine in Firefox though. Here is my HTML and CSS for the navigation.

HTML:

<ul id="main_nav">
<li><a href="http://houseofhunger.com/" accesskey="3" id="home" title="Home">Home</a></li>
<li><a href="http://houseofhunger.com/about" accesskey="4" id="about" title="About">About</a></li>
<li><a href="http://houseofhunger.com/menu" accesskey="5" id="menu" title="Menu">Menu</a></li>
<li><a href="http://houseofhunger.com/connect" accesskey="6" id="connect" title="Connect">Connect</a></li>
</ul>
</div>

CSS:


#main_nav { list-style: none; margin: 0; padding: 0;}
#main_nav li { float: left; position: relative; top: -75px; left: 50%;}
#main_nav li a { text-indent: -999999px; display: block; height: 50px; }


#home { background: url('images/home.png')-300px 0; width: 100px; }
#home:hover { background: url('images/home.png') 0 0 !important; }
#home.active { background: url('/images/home.png') -150px 0; }

#main_nav:hover li a#home { background-position: -150px 0; }

#about { background: url('images/about.png')-300px 0; width: 100px; }
#about:hover { background: url('images/about.png') 0 0 !important; }
#about.active { background: url('/images/about.png') -150px 0; }

#main_nav:hover li a#about { background-position: -150px 0; }

#menu { background: url('images/menu.png')-300px 0; width: 100px; }
#menu:hover { background: url('images/menu.png') 0 0 !important; }
#menu.active { background: url('images/menu.png') -150px 0; }

#main_nav:hover li a#menu { background-position: -150px 0; }


#connect { background: url('images/connect.png')-300px 0; width: 100px; }
#connect:hover { background: url('images/connect.png') 0 0 !important; }
#connect.active { background: url('images/connect.png') -150px 0; }

#main_nav:hover li a#connect { background-position: -150px 0; }

[izrafel]

your default background images aren't being displayed in ie for some reason.

it looks like theres no space between the ) and the -300px

#home { background: url('images/home.png')-300px 0; width: 100px; }
should be
#home { background: url('images/home.png') -300px 0; width: 100px; }