Search code examples
csswebkitcss-floatposition

Circumventing webkit bug on positioning <li> bullet wrong after float element

There is a bug in WebKit that causes the browser (Safari, Chrome, ...) to position the bullet or number of the first <LI> in an <OL> or <UL> on the right side if it is preceeded by a floated element. Here's a simple example of the problem:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="width:250px">
    <div style="width: 100%; float: left;">
    List with bullet at the wrong side:
    </div>
    <div>
      <ul>
        <li>bullet ends up here -></li>
      </ul>
    </div>
  </body>
</html>

Since it has been reported there is some slight chance that it might be fixed at some point.

In the meanwhile, how can I, by only modifying the styling of the existing DIV:s, (i.e. without modifying the structure) circumvent the problem?

Solution

  • Use overflow: hidden; on the element after the floated one or on the list.

    http://jsfiddle.net/E3FPS/

    Of course this has other side effects that come with hidden overflow, such as that you can't move elements beyond the bounding box or they will cut off.