Only in IE9 and IE10 can you find bullets that decide to join the image instead of staying with the text. In some situations, the bullets will even end up under the image leaving you wondering where they went.

Cross-browser fix #1

This solution works fine as long as your text wraps. If it does, you will find that the hanging indent effect bullets normally have will be missing.

<html>
<head>
  <style>
    ul.inside li {list-style-position: inside;}
  </style>
</head>
<body>
 <img src="http://lorempixel.com/200/200" heigh="200" width="200" style="float:left;margin-right:10px;">
 <ul class="inside">
   <li>List Item 1 - Lorem ipsum dolor sit amet, adipiscing turpis vitae felis ultricies quis iaculis erat pellentesque. Donec pretium lobortis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tortor nibh, laoreet sit amet eleifend quis, aliquet sed ligula. Morbi pharetra magna eget ligula molestie id vehicula erat interdum. Pellentesque volutpat erat erat. Praesent ornare consectetur aliquet.</li>
   <li>List Item 2</li>
 </ul>
</body>
</html>

The results of this code looks like this…

test photo

  • List Item 1 -- Lorem ipsum dolor sit amet, adipiscing turpis vitae felis ultricies quis iaculis erat pellentesque. Donec pretium lobortis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tortor nibh, laoreet sit amet eleifend quis, aliquet sed ligula. Morbi pharetra magna eget ligula molestie id vehicula erat interdum. Pellentesque volutpat erat erat. Praesent ornare consectetur aliquet.
  • List Item 2

Cross-browser fix #2

An alternate and simpler solution (thanks David) is to set the display style of the UL element to table. As you can see below, this solution doesn't suffer from the missing hanging indent for wrapping text that solution #1 above did.

Tip: If the bullets are still missing or overlapping the image, you may also need to set the padding-left style of the UL tag to a value other than 0 (example: padding-left:20px;).

<img src="http://lorempixel.com/200/200" heigh="200" width="200" style="float:left;margin-right:10px;">
 <ul style="display:table;">
   <li>List Item 1 - Lorem ipsum dolor sit amet, adipiscing turpis vitae felis ultricies quis iaculis erat pellentesque. Donec pretium lobortis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tortor nibh, laoreet sit amet eleifend quis, aliquet sed ligula. Morbi pharetra magna eget ligula molestie id vehicula erat interdum. Pellentesque volutpat erat erat. Praesent ornare consectetur aliquet.</li>
   <li>List Item 2</li>
</ul>

This code produces the following result:

test photo

  • List Item 1 -- Lorem ipsum dolor sit amet, adipiscing turpis vitae felis ultricies quis iaculis erat pellentesque. Donec pretium lobortis blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tortor nibh, laoreet sit amet eleifend quis, aliquet sed ligula. Morbi pharetra magna eget ligula molestie id vehicula erat interdum. Pellentesque volutpat erat erat. Praesent ornare consectetur aliquet.
  • List Item 2

Of course you could just put the image on the right side of the text. Then everything will work out just fine.

Related Posts: