WordPress.org

Ready to get started?Download WordPress

Forums

IE9 bad rendering of 'li' (4 posts)

  1. Andrzej
    Member
    Posted 2 years ago #

    Has anyone noticed the awful rendering of
    <li> tags by IE9? It shows the list bullet as a full height block while FireFox shows a much smaller and more pleasing rendering. The site is using a twentyten child theme.

  2. Andrzej
    Member
    Posted 2 years ago #

    Ok, A quick test of twentyeleven theme suggests the bad 'li' rendering is caused by the twentyten theme! Will investigate.

  3. Andrzej
    Member
    Posted 2 years ago #

    I don't use IE9 that often - this issue does appear to be IE related.

    Solution is to click the Compatibility View (ripped page) icon in the URL area of IE9.

  4. Ov3rfly
    Member
    Posted 2 years ago #

    IE9 renders the list-style-type square way too big.

    The reason is the serif entry in font-family in Twentyten theme file style.css:

    body, input, textarea, .page-title span, .pingback a.url {
        font-family: Georgia,"Bitstream Charter",serif;
    }

    If you remove/replace the serif with e.g. "Times New Roman", IE9 renders the square fine as expected, tested on latest Windows 7.

    Solution/workaround, put this at the beginning of your twentyten child theme style.css:

    body, input, textarea, .page-title span, .pingback a.url {
        font-family: Georgia,"Bitstream Charter","Times New Roman";
    }

    Clearly a bug in IE9. As already the Georiga font ist present in the test-system, IE9 should not even look at the other fonts but it does and messes up its rendering.

Topic Closed

This topic has been closed to new replies.

About this Topic