IE cachant le texte; devrait être simple ... problème de hauteur de ligne?

Question

J'ai un menu à chaque élément d'une police différente taille/taille - semble très bien dans tout sauf IE qui coupe les articles dans la moitié ...

Voici le HTML:

<header> 
<div class="inside"> 
    <h1><a href="#">Ballroom Rocks LOGO</a></h1> 
    <nav> 
    <ul> 
    <li><a href="#home" class="nav" value="home" id="nav-home">Home</a></li> 
    <li><a href="#theshow" class="nav" value="theshow" id="nav-theshow">The Show</a></li> 
    <li><a href="#dancers" class="nav" value="dancers" id="nav-dancers">Dancers</a></li> 
    <li><a href="#cteam" class="nav" value="cteam" id="nav-cteam">Creative Team</a></li> 
    <li><a href="#thebuzz" class="nav" value="thebuzz" id="nav-thebuzz">The Buzz</a></li> 
    <li><a href="#cevents" class="nav" value="cevents" id="nav-cevents">Corporate Events</a></li> 
    <li><a href="#media" class="nav" value="media" id="nav-media">Media</a></li> 
    <li><a href="#news" class="nav" value="news" id="nav-news">News</a></li> 
    <li><a href="http://ballroomrockslive.blogspot.com/" value="blog" id="nav-blog" target="_blank">Blog</a></li> 
    <li><a href="#contact" class="nav" value="contact" id="nav-contact">Contact</a></li> 
    </ul> 
    </nav> 
</div> 
</header> 

Et la relevent CSS:

ul li {padding: 0; margin:0 0 2px 0; height: auto; line-height: auto; overflow: visible; display: block;vertical-align:top;} 
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: white; margin:0; display: block; vertical-align: top; overflow: visible; line-height: auto;} 
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;} 

ul li a#nav-home{display: block; font-size:26px; height: 21px; line-height: 21px;} 
ul li a#nav-theshow{display: block; font-size:27px; height: 21px; line-height: 21px; padding-top: 2px; } 
ul li a#nav-dancers{display: block; font-size:35px; height: 26px; line-height: 26px; padding-top: 4px;} 
ul li a#nav-cteam{display: block; font-size:26px; height: 23px; line-height: 23px;} 
ul li a#nav-thebuzz{display: block; font-size:34px; height: 25px; padding-top: 3px;} 
ul li a#nav-cevents{display: block; font-size:22px; height: 21px; } 
ul li a#nav-media{display: block; font-size:46px; height: 30px; padding-top: 7px;} 
ul li a#nav-news{display: block; font-size:34px; height: 24px; padding-top: 3px;} 
ul li a#nav-blog{display: block; font-size:24px; height: 20px; padding-top: 1px;} 
ul li a#nav-contact{display: block; font-size:28px; height: 23px; padding-top: 1px;} 

et un lien: http://www.mindsmack.com/clients/BallroomRocks/index.html

J'ai essayé différentes versions et ligne-hauteurs et rembourrage ... Toutes les idées wh at pourrait causer cela?

(edit: problème était dans IE7)

Answer 1

Je nettoyais le css et débarrassé de la vertical-align et il fonctionne très bien dans IE7 maintenant

header{position: absolute; left: 0; top: 0;} 
header h1 a{display: block; width: 320px;background: url('../images/logo.jpg'); margin:0; text-indent: -9999px; padding: 0;} 
ul{list-style-type: none; margin: 50px 0 0 70px; width: 250px;} 
ul li {padding: 0; margin:0 0 2px 0; display: block;} 
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: black; margin:0; display: block; line-height:.8em;} 
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;} 
ul li a#nav-home { font-size:26px; } 
ul li a#nav-theshow { font-size:27px; } 
ul li a#nav-dancers { font-size:35px; } 
ul li a#nav-cteam { font-size:26px; } 
ul li a#nav-thebuzz { font-size:34px; } 
ul li a#nav-cevents { font-size:22px; } 
ul li a#nav-media { font-size:46px; } 
ul li a#nav-news { font-size:34px; } 
ul li a#nav-blog { font-size:24px; } 
ul li a#nav-contact { font-size:28px; }