The main purpose of this trick was to show pictures of unknown height in a fixed container, in this case a box with fixed width and height and a border. You can see it here http://www.arte-deco.ro/ as a gallery but it may be used in other ways also. The main advantage is that it does not require extra html code and in work in most modern browsers (Firefox, IE6,7,8, Chrome, i'm not sure about Opera). The html code: [code,html] ------ <div class="poza-prod"><a href="#"><img src="x294.JPG" alt="" title="" /></a></div> ------ The css code: [code,html] ------ .poza-prod{ width:152px; height:152px; line-height:150px; text-align:center; vertical-align:middle; border:1px solid #DADADA; margin-bottom:15px; } .poza-prod a{ border:1px solid #ffffff; /*the main ideea of the hack, same color as background to be invisible*/ vertical-align:middle; _font-size:130px; /*hack for IE, other browsers won't see this*/ } .poza-prod img{ border:0; display:inline-block; vertical-align:middle; } ------ In this example the width and height of the picture must not exceed 150 pixels to show nicely. It can be easily modified to work with variable widths, but when you modify the height you must fine tune the font-size in the hack for IE.

Save as new Revision