title: How can I have "list style position outside" and floating elements in IE9?
body: <p>The following markup is not something I can change as it's based on user content. The problem is that in IE9 the bullets in a <code>ul</code> that are next to a floated <code>img</code> appear on the wrong side of the image. This is only a problem in IE9. The way the <code>ul</code> wraps the image is desired behavior and something I'd like to keep but that makes this problem really hard to solve.
  Any ideas on how to solve this without changing the markup and in a way that looks good cross-browser?</p>
  
  <p><strong>Fiddle</strong>
  <a href="http://jsfiddle.net/fdHN6/" rel="nofollow">http://jsfiddle.net/fdHN6/</a></p>
  
  <p><strong>EDIT :</strong> I should have mention this, <code>list-style-position: inside</code> causes the last bullet point which has more than one line of text to align incorrectly which is why that alone is not really a good solution.</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div style="width:500px;"&gt;
              &lt;img src="http://placekitten.com/g/200/303" alt="smelly cat" /&gt;
              &lt;ul style="margin-left: 10px;"&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine!&lt;/li&gt;
                  &lt;li&gt;Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  body{
      margin-left:35px;
  }
  
  img {
      margin:20px;
      float:left;
  }
  
  ul li {
      list-style-type: disc;
  }
  </code></pre>