CSS trouble with IE7

Question

I am designing a website and it looks good in basically all browsers except IE7, where I have a problem I haven't been able to correct. I have a menu in HTML like this:

<div id="nav">
        <ul>
            <li id="cMenu"><a id="cart" href="#">Home</a></li>
            <li id="pMenu"><a id="promos" href="#">Promos</a></li>
            <li id="aMenu"><a id="anun" href="#">Ads</a></li>
        </ul>
    </div><!-- /nav -->

Then I have my CSS:

div#nav{width:339px;height:120px;display:block;}

div#nav ul{list-style:none;}
div#nav ul li{display:inline;padding:20px;}
div#nav ul li a{width:30px;height:80px;}

div#nav ul li#cMenu{text-indent:-999999px;}
div#nav ul li a#cart{background:url(../img/menu2.png) 0 50px no-repeat;width:110px;height:120px;display:block;}
div#nav ul li a#cart:hover{background:url(../img/menu2.png) 0 -69px no-repeat;}

The thing here is that when I preview this on IE7 nothing gets displayed, I've tired positioning absolutely and also checking if everything is there by using border="dotted" and I get to see the border of only the div#nav, nothing else shows up. (I didn't placed all of the css of the menu since it's basically the same just different id's).

Does anybody knows what's wrong?

Answer 1

hi,

div#nav ul li#cMenu{text-indent:-999999px;}

by this its sending all inside li tag to -9999999 text-indent

try putting text-indent to a tag

i hope it work

Answer 2

Use

display: block;

for your CSS nav declaration. That should fix it :)