CSS - Bullet point incorrect vertical align in IE

equentin
equentin used Ask the Experts™
on
I've got the following HTML/CSS  and the bullet points are appearing at the bottom of the subnav containers instead of at the top in IE.  Any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
#nav {
      float: right;
      margin: 0;
      padding: 0;
      text-align:left;
      width: 180px; /* BMH */
      width: 170px;
      background-color:#FFFFFF;
}
      
* html #nav {
      margin-right:-12px;
}

#nav ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      border: none;
      line-height: 1.45em
}
            
#nav li {
      border-bottom: 1px solid #FFFFFF;
      }
      
#nav li a {
      display: block;
      padding: 0px 6px 0px 6px;
      background-color: <%=strColorTint%>;
      color: #333333;
      text-decoration: none;
      width: 100%;
      }

html>body #nav li a {
      width: auto;
      }

#nav li a:hover {
      background-color: <%=strColor%>;
      color:#666666
}
#nav a:link.active, #nav a:visited.active {
      background-color: <%=strColor%>;
      color: #666666;
      font-weight:bold;
}
      
#subnav ul {
      list-style-type:disc;
      list-style-position: inside;

      margin: 0;
      padding: 0px 10px 0px 20px;
      border: none;
}


#subnav li a {
      font-size: .9em;
      padding: 0px 2px 0px 0px;
      background-color: #FFFFFF;
      color: #000000;
      text-decoration: none;
      width: 100%;
}
      
#subnav li a:hover {
      background-color: #FFFFFF;
      color: <%=strColor%>;
      text-decoration: underline;
}

#subnav a:link.active, #subnav a:visited.active {
      background-color: #FFFFFF;
      color: <%=strColor%>;
      font-weight:bold;
      text-decoration: underline;
}

html>body #subnav ul li a {
vertical-align:middle;
}

</style>

</head>
<body>
      
      <div id="nav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
                  
            <div id="subnav">
                <ul>
                    <li><a href="#">Saepe eveniet ut et voluptates repudiandae sint qui</a></li>
                    <li><a href="#">Accusantium doloremque laudantium</a></li>
                    <li><a href="#">Nisi ut aliquid ex ea commodi consequatur?</a></li>
                    <li><a href="#">Quo voluptas nulla pariatur? Accusantium doloremque</a></li>
                </ul>
            </div>
                  
            <li><a href="#">Link 3</a></li>
                  
        </ul>
      </div>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007
Commented:
add this to your CSS:

#subnav ul li {
vertical-align: top;      
}

Author

Commented:
That's great - ta, mind you, a bit irritiating that they're no aligned perfectly, but it seems you can't have everything!

Cheers,
eq
Top Expert 2007

Commented:
You're welcome.

and yes you can't have everything. and you might want to change your doctype to strict to make browser behave more like each other.

-VM

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial