CODEWITHSUNDEEP
cssinternet-explorer-9css-float
chris
chris

Reputation: 505

How can I have "list style position outside" and floating elements in IE9?

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 ul that are next to a floated img appear on the wrong side of the image. This is only a problem in IE9. The way the ul 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?

Fiddle http://jsfiddle.net/fdHN6/

EDIT : I should have mention this, list-style-position: inside 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.

<html>
    <body>
        <div style="width:500px;">
            <img src="http://placekitten.com/g/200/303" alt="smelly cat" />
            <ul style="margin-left: 10px;">
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine</li>
            </ul>
        </div>
</body>
</html>

body{
    margin-left:35px;
}

img {
    margin:20px;
    float:left;
}

ul li {
    list-style-type: disc;
}

Upvotes: 1

Views: 11798

Answers (4)

Martin Hugo
Martin Hugo

Reputation: 184

Make the ul display as a table.

ul{display:table;}

Upvotes: 1

Yannick Schall
Yannick Schall

Reputation: 34909

Just had the same issue. I used

ul {
 overflow: hidden;
 list-style-position: inside;
 text-indent: 1em;
 margin-left: 0;
}

li {
 padding-left: 1em;
}

overflow hidden create a new formatting context and force the box to "clear" the float. This way the bullet "respect" the floated image.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Seems to work alright.

Upvotes: 1

Ella
Ella

Reputation: 11

I had the same problem and managed to find a fix.

I had an image floated on the left and a UL to its right side. I wanted the list position to be outside so the text that spans multiple lines aligns nicely on the left. However in IE9 the bullets ran to the left, over the image, rather than floating to the right of the image.

So I use list-style-postion:inside; for the UL and I also added a negative text-indent for it, -12px worked perfect for me, you'll need to vary that until it fits your needs.

Upvotes: 1

Larry
Larry

Reputation: 1248

list-style-position: inside;

should solve your issue.

http://jsfiddle.net/fdHN6/1/

UPDATE: Using pseudo-elements you can achieve a similar effect, while preserving the text-indent:

http://jsfiddle.net/fdHN6/3/

Upvotes: 1

Related Questions