Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

list-style: square; rendering too big only in Internet Explorer

7:48 pm on Feb 27, 2013 (gmt 0)

New User

joined:Nov 19, 2012
votes: 0

ul { list-style: square; }

is rendering way too big in Internet Explorer (I am only using 9, dont know about the rest). Even though it does not look very good, I would not worry about that, but I need to have a list of about 200 items in an iframe, and the squares are extending its height by about 100px.

I know I can get around this one by replacing the squares with a picture in css, but I would like to see if there is no easier way to fix it in the code (only for the IE9).

Thank you.

- - -

A screenshot can be viewed at:

g h e t t o - p o r n . c o m / s q u a r e s . j p g (no spaces; no adult content)
1:53 am on Feb 28, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 552

Their exact rendering depends on the user agent.

This is CSS-speak for "You are SOL."

Would you believe this is really a font question? MSIE has historically been lousy at font substitution, and that's what is going on here. Not all fonts contain the "square" glyph (there are about half a dozen of them and I don't know which, if any, is specified for list markers) so it's down to the browser to find one. Unfortunately, solid black squares range widely in size from one font to the next.

I can think of one workaround off the top of my head-- I've used it to get oversized numbers without resorting to images-- but it's clunky so I'll wait for someone else to suggest a better approach.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members