(I took this example of a breaking hack from the "Jardine Pro" template of the
Adobe Lightroom public beta 4, a great RAW-converter, that has a Web Module
which builds a tableless, CSS-driven HTML photo gallery. I already filed this
bug to Adobe.)
See the vertical alignment of photos inside a grid.
/* PROPER ALIGNMENT INSIDE CELLS */
.alignmentOuter { ... position: absolute; top: 0; left: 0; ... }
.alignmentOuter[class] { position: static; text-align: center; display: table; }
.alignmentMiddle { ... position: absolute; top: 50%; left: 50%; }
.alignmentMiddle[class] { position: static; display: table-cell;
vertical-align: middle; }
simplified HTML:
<div class="thumbnail">...
<div class="alignmentOuter">...
<div class="alignmentMiddle">...
<img ...>
The idea of the thumbnail is that the table-cell is vertically centered in good
browsers with support of the attribute selector:
.alignmentMiddle[class] ...
IE6 did not support this type of selector, the alignment is made with
position:absolute and top-offset instead (the rules of the attribute selector
are ignored).
The problem with this kind of hack is that it makes a wrong assumption: A
browser that would support sophisticated selectors would support CSS more
completely.
IE7 now basically supports attribute selectors, so position:absolute is
overwritten by 'static'. But IE 7 does not support display:table or table-cell.
So IE7 applies {position:static; top: 50%; left: 50%; vertical-align: middle;}
for .alignmentMiddle in effect, but this is useless for the purpose of vertical
alignment.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
