Fixed size picture is collapsed in chrome while loading

Issue

I have to fix an issue where a fixed size picture is floated left, but while the image is not loaded yet it’s “collapsed” (meaning that it doesn’t take up it’s supposed width.

I have made a jsfiddle for this but on the fiddle everything works fine surprisingly. (It’s possible that the images are loading so fast, but I doubt it as on my system it’s quite noticable.

My layout:

<div class="wrap">
  <a href="#somewhere">
    <img width="110" height="110" class="img" src="http://placehold.it/110x110" alt="Picture" />
  </a>
  <div class="bd">
    <h3>
      <a href="#somewhere">Lorem Ipsum</a>
    </h3>
    <div class="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sodales lectus. Suspendisse massa ipsum, tempor eget pharetra ac, gravida eu ipsum. Nam sit amet neque vitae dolor consequat volutpat quis et neque. Vestibulum ut purus in quam tincidunt ultricies. In consectetur eleifend dolor, fringilla dignissim lectus dapibus sit amet. Integer nec velit nisl. Cras quis molestie leo. Cras eget odio vel velit eleifend auctor ut a lacus. Suspendisse auctor tincidunt enim eu posuere. Cras dui magna, laoreet sit amet interdum nec, rutrum sit amet turpis. Donec mattis velit eu lectus condimentum luctus.</p>
    </div>
  </div>
</div>

The relevant css:

.wrap {
    padding: 10px;
    margin: 10px 0px;
    overflow: hidden;
}

.img {
  float: left;
  margin-right: 10px;
}

.bd {
  min-width: 200px;
  overflow: hidden;
  zoom: 1;
}

On jsfiddle:

http://jsfiddle.net/PT4ST/1/

The real page (where the problem is actually visible):

http://a4team.eu/multimedia-c376597?oldal=5

If you use chrome and check the “real page”, you can see that a not-yet-loaded image does not hold it’s place, like the second block on this image:

Just press a few f5-s.

Why is this and how to make the image take up it’s place during load?

I’m not a designer, but I have to fix this. and I haven’t been able to find the root of the problem.

Other browsers (FF, IE, Opera) work fine if I explicitly give a width=”110″ to the image tag.

Solution

After chrome got updated the following was enough to fix this:

.wrap .img {
    width: 110px;
    height: 110px;
}

This way the size of the picture is respected in chrome even during load.

Answered By – vinczemarton

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0