Home/ Questions/Q 7439821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:45:38+00:00

The browser is IE7. I have no control over that. It sucks, but it’s

  • 0

The browser is IE7. I have no control over that. It sucks, but it’s my world. I have also verified that it happens in FF3.6 as well, but honestly, because of the corporate environment, I don’t give a hang to make it work there, so long as it works in IE7.

This HTML:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link type="text/css" href="test.css" rel="stylesheet"  />
</head>
<body>
  <div>
    <ul>
      <li>Top level a
         <ul>
           <li>level 2 a</li>
           <li>level 2 b</li>
           <li>level 2 c</li>
           <li>level 2 d</li>
         </ul>
      <li>
      <li>Top level b
        <ul>
           <li>another level 2 a</li>
           <li>another level 2 b</li>
           <li>another level 2 c</li>
        </ul>
      </li>
      <li>Top level c
         <ul>       
            <li>3 level 2 a</li>
            <li>3 level 2 b</li>
            <li>3 level 2 c</li>
            <li>3 level 2 d</li>
         </ul>
      </li>
    </ul>
  </div>
</body>
</html>

with this css:

body { font: 12pt Verdana black; }
/*yellow div entirely for visibility's sake*/
div {
    width: 500px;
    height: 125px;
    background-color: yellow;
}
ul {
    margin-left: 15px;
    padding-left: 15px;
}
li { 
    margin-left: 15px;
    padding-left: 15px;
}
div ul {
    list-style-type: none;
}
div ul li {
    font-weight: bold;
    display: inline;
    float: left;
    width: 140px;
}
div ul li ul { 
    list-style-type: disc;
}
div ul li ul li {
    font-weight: normal;
    display: list-item;
    width: 100%
}

What I expect:
The “top level” items will appear in a row from left to right
Their sublists will appear as a vertical list underneath the respective top level item. The sublists will also have a disc as a bullet before each item.

What I get:
The top level items appear as expected, in a row from left to right
Their appear as vertical lists as expected. However, the bullets are missing.

Is this a hopeless case? or can I beat IE7 into submission with correct code?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All your <li>s are floating. You only want to float the top level ones, right? Then apply float:none to the deeper ones. And you don’t need to change the display type to inline; float will do the trick by itself.

    By the way, what is the font name? Verdana Black? Then it’s STRONGLY recommended to put quotes around the name.

    • 0