0

Strange issue in firefox, I have 4 images floated next to each other with a width of 25% of their container. These images all sit flush next to each other, but as soon as I use an image that contains text then as i resize the browser to change the width of the container the images don't always sit flush, they seems to shrink by a px.

HTML

<img src="image.jpg" />
<img src="image.jpg" />
<img src="image.jpg" />
<img src="image.jpg" />

CSS

img {
  width: 25%;
  float: left;   
}

The img tags seems to take up the correct space, it's just the actual image. As i've applied a background to the img which is visible when resizing.

See the below jsfiddle to demonstrate the issue. The top is a row of images with no text, as you can see they sit fine. The 2nd row is same size images but with text and as you resize you'll see the blue come through from the background applied to the img.

Note this only happens in firefox, all other browsers seem ok.

I guess it's to do with the way firefox is calculating the width based on the 25% but is there any work around.

http://jsfiddle.net/bennyb/q5zQT/2/

Ben
  • 1,022
  • 3
  • 13
  • 23
  • For what it's worth, Firefox sucks at downscaling images: http://stackoverflow.com/questions/5918595/why-is-firefox-so-bad-at-resizing-images This doesn't answer the specific question of why the top images work, but the bottom ones don't. Interestingly, applying the fix suggested in that post makes both sets of images perform equally terribly, which is…not very helpful. :) – Ben Dyer Jul 16 '14 at 18:05
  • It's strange that it's only when you add text to the image. So in the bottom row if i open that image and cover the text up and re save you'll start getting the issue. – Ben Jul 16 '14 at 18:53
  • I'm sure it probably has something to do with how Firefox is compressing the images, but I couldn't tell you why. Like I said, Firefox has a lot of outstanding issues in this area, so your guess is as good as mine. You'll probably have to try some alternate methods to accomplish the same thing, combine images, try an SVG file, or the `` tag or something like that. – Ben Dyer Jul 16 '14 at 19:49
  • Thanks for your responses, yeah does seem like FF really does suck with downscaling. Some of these images are going to be full photos so SVG not really an option. But canvas could work, had a very quick attempt and seems to not have that issue. But may actually take the easy option and just apply a margin-right:-1px. Thanks again – Ben Jul 16 '14 at 21:30

0 Answers0