Image gallery: how to control the layout
To control alignment of images and labels in a gallery in several columns and row, tricks must be used to maintain compatibility with all browsers, including older versions of Internet Explorer.
The images are placed in a list with the tags <li> and the CSS display: inline-block property let them to be juxtaposed and not aligned vertically in a list.
But to avoid overflow, and the destroying of the layout when images or text require extra space, we must tap into the resources of style sheets...
<ul class="gallery"> <li><img ...><br>text</li> <li>... </ul>
A new list is used for each row of the gallery.
display:inline-block; width: 158px;
_height: 170px; border:none;
Patents in the U.S., a broken system.
Second Life. Knowing Web players, their products
Entering a fractal world, a graphic demonstration.
The following code defines a framework for each image with its label, with the inline-block option, which is part of CSS 2:
display:inline-block;w idth:158px; min-height:170px; vertical-align:top; text-align:center; padding:4px;
The extra commands are for compatibility with older versions of Internet Explorer.
To replace inline-block that is not supported in Internet Explorer (before version 9), we use two properties:
Placing an asterisk before "display" ensures that the property will be recognized by Internet Explorer 7 only. The zoom property is ignored by other browsers and indicates that the image should be displayed fully and this has consequential effects on the layout.
And for compatibility with IE6:
The underscore code is only recognized by this browser and the property therefore only accounts for IE6, it replaces min-weight that is not yet implemented in this version.
Adding a border
You can change the border property in option that allows creating a border, with for example:
border:1px solid gray;