List has gap in IE that shouldn’t be there

[hippy74]

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.

http://www.ecswebdesign.co.uk/wip/childsplay/gallery.html

Any help would be much appreciated

[Merri]

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.

[hippy74]

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

[Author]

Posts