<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Lists: Outside Bullet Effect On Line Boxes</title>
  <style type="text/css">
   .li { list-style: url(/resources/images/1x1) disc outside; display: list-item; border: thick solid green; background: red; line-height: 1.0; }
   .control { border: thick solid red; height: 1em; }
   div { position: absolute; top: 0; left: 0; font-size: 3em; }
  </style>
 </head>
 <body>
  <!-- The bullet should, even though it is only a pixel high, cause a
  line box to be created, and the line box should not be smaller (or,
  for that matter, larger) than 1em due to the line-height
  declaration. The control box should therefore be the same size. The
  list item should, however, have no width, since the line box is
  otherwise empty. -->
  <div class="control"/> <div class="li"/>
 </body>
</html>
