Question

I have a menu with each item a different font-size/height — looks fine in everything but IE which cuts the items in half…

Here’s the 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>

And the 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;}

And a link: http://www.mindsmack.com/clients/BallroomRocks/index.html

I’ve tried various versions and line-heights and padding… Any ideas what could be causing this?

(edit: problem was in IE7)

Answer 1

I cleaned up the css and got rid of the vertical-align and it works fine in ie7 now

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; }