Setting image size in image tags

|Reading time: 48 secs

There is a bug in Mozilla browsers, which causes jumping of some parts of the content while loading, and sometimes some portions of layout stay in wrong positions. Experienced this when making slight redesign of Graniti-Sušec homepage. The exact size of the image under introducing paragraph wasn’t set, so during page load, division containing latest news, stayed too far below:

Screenshot of poorly positioned section

This occurs when image is placed in floating parent element, in this case <div>, which floats to the left.

After I set correct size of image: <img src="../slike/skl_3.png" height="165" width="220" alt="a detail of stock pile" />, everything stayed at its’ place:

Screenshot of properly positioned section

Feel free to discuss on jumping bugs under the comments..

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?