CODEWITHSUNDEEP
css
Quoc Khanh
Quoc Khanh

Reputation: 25

CSS: unorderred list <ul> Indent issue in IE

I have an issue with unorderred list tag () when run it in IE.

Please review this link with IE and Chrome. Currently, my bullet overlaps my image. How could I fix this in IE?

http://jsfiddle.net/5yygs2ud/4/

<div class="wysiwyg">
<div style="float: left; margin: 0 12px 8px 0;">
    <img src="" alt="" width="267" height="200" style="background-color:yellow"/>
</div>


 <p><strong>My title!</strong></p>
<ol>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ol>
<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3 </li>
</ul>
My content!
</div>

and CSS is:

.wysiwyg ol {
list-style-position: inside;

}

NOTE: Ideally, I dont want to move text stuff outside 'div.wysiwug'. You can create new div to wrap it or move it into above image div

Upvotes: 0

Views: 55

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

If you add display property value of block to the LI, you'll be just fine.

li {
   
    display: block;
}

.wysiwyg ol {
    list-style-position: inside;
}
<div class="wysiwyg">
	<div style="float: left; margin: 0 12px 8px 0;">
        <img src="" alt="" width="267" height="200" style="background-color:yellow"/>
	</div>

        

	    <p><strong>My title!</strong></p>
<ol>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
</ol>
<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3 </li>
</ul>
My content!
</div>

Upvotes: 1

trex005
trex005

Reputation: 5115

Applying your CSS for the ol to the ul as well did the trick. I also wrapped your right hand content in a div for cleanliness sake

.wysiwyg ol, .wysiwyg ul {
     list-style-position: inside;
}

Fiddle : http://jsfiddle.net/5yygs2ud/6/

Upvotes: 2

Jenti Dabhi
Jenti Dabhi

Reputation: 880

<div class="wysiwyg">
<div style="float: left; margin: 0 12px 8px 0;">
    <img src="" alt="" width="267" height="200"/>
</div>      
    <p><strong>My title!</strong></p>
    <ol>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>
    </ol>
    <ul>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3 </li>
    </ul>
    My content!

    please add ol and ul this property in css:
    ol,
    ul{display: inline-block;}

Upvotes: 1

Related Questions