The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS List has gap in IE that shouldn’t be there

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #44547

    Hi all, not sure what’s goin on here I’m guessing it’d really simple but sometimes can’t see the wood for the trees.
    Basically the thumbnail images are displaying ok in chrome but not in IE,it’s only a list so i’m guessing it’s a css issue somewhere.

    Any help would be much appreciated


    Actually the gap exists in Firefox as well. The issue occurs due to subpixel rounding differences. Firefox and IE9+ account for subpixel values much more than browsers previously did and one of your images is one pixel less in height. So when the image size is reduced these browsers’ rendering engine see that tiny subpixel difference and correctly place the floated element where it belongs.

    To get rid of this problem you can:

    1. Fix the size of the image so that all images are equal size.
    2. Or use `display: inline-block;` and remove the float.

    Personally I think Chrome and Opera should improve their subpixel awareness because it can have big impact on rendering results in some cases.

    Also floats tend to cause issues like this. However this kind of features are intended behavior of floats.


    Thank you very much indeed, doubt I’d ever have spotted that!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.