IE9 bad rendering of 'li'

  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Andrzej

    (@awoz)

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

    Thread Starter Andrzej

    (@awoz)

    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.

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘IE9 bad rendering of 'li'’ is closed to new replies.