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

[tbe22]

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)

[lucy24]

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.