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

ul { list-style: square; }

Code (markup):

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.

Here is a screenshot:

 

The size of the square (true for any list style type) is directly proportional to the font size of the text. It might be due to the fact that different browsers render text a bit differently, or the styles are incorrectly done. I can only suppose, since you haven't provided the code.

Anyways, there are quite a few solutions. The most commonly used one, slapping span around <li> content and then styling span and li differently is really bad practice and I won't recommend you doing that.

Instead of doing that, and even using any list style, go ahead and use a pseudo-class :before.

li:before {
  content:'\25A0';
  padding-right:/*put any value that suits you, in order to separate the square from content*/
  font-size:/*put a fixed metric font size*/
}

Code (markup):

This is way better than using list-style:square in the first place, mainly because of the consistency between browsers. Note that IE7 and older don't support this pseudo-class. (oh well)

Hope it helps

 

I think another way is you could just use a background square image icon in you ul li css.

 

Welcome to a side effect of the HTML specification, which does not clearly state what the default size of something like square or disc should be. As mentioned use generated content or an image if you actually care about it being the same cross-browser. Really for something like a list, I wouldn't sweat it. Oh noes, they're bigger, not that... :/

 

Browsers differ in the ways they interpret things. If you REALLY want to have them the same size, then use a background image as such.

li {
background-image: Url_of_Image.jpg; /* This image should be the square you want, with the same height as the element */
height: 2em; /* The EM means that the list will appear twice the spacing of a letter of text. */
padding: 0.5em 0.5em 0.5em 3em; /* Setting padding for list, extra space on left to allow image to display properly */
}

Code (markup):