CODEWITHSUNDEEP
cssinternet-explorer
Gabriel
Gabriel

Reputation: 5734

Odd behavior with list bullets in Internet Explorer 10-11

Check this out, the bullets are on the picture:

enter image description here

Picture css:

    img[src="img/tecnicos.jpg"] {
    max-width: 300px;
    max-height: 300px;
    float: left;
    margin-right: 2em;
}

Bullet list css:

    #contenido ul {
    max-width: 75ch;
    margin: auto;
    font-family: 'Work Sans';
    text-align: left;
    line-height: 1.5em;
    font-size: 0.9em;
    list-style: disc;
}

HTML:

 <h2>BLa</h2>
        <img src="img/image.jpg" alt=''>
        <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>...</li>
        </ul>

Li element has no css.

On Chrome and Firefox the bullets are displayed right where it should, next to the text.

Tips?

Upvotes: 0

Views: 38

Answers (2)

Andr&#233; Huf
Andr&#233; Huf

Reputation: 114

Create a new block formatting context with

ul {
    overflow: hidden;
}

Upvotes: 0

jameson
jameson

Reputation: 201

Adding overflow: hidden to the list fixes it if you don't need the list to flow around the image: https://jsfiddle.net/jameson5555/95koe4sg/2/

ul {
    overflow: hidden;
}

If it does need to wrap, you could add something like this: https://jsfiddle.net/jameson5555/95koe4sg/3/

ul {
    overflow: hidden;
    display: inline;
    list-style-position: inside;
}

Upvotes: 1

Related Questions