[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS - Bullet point incorrect vertical align in IE

Posted on 2004-11-09
3
Medium Priority
?
7,990 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:equentin
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 2000 total points
ID: 12532236
add this to your CSS:

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

Author Comment

by:equentin
ID: 12532723
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
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12532749
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
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question