Hi everyone,
I remember unceremoniously giving up on this problem using static styles (and resorting to Javascript) the last time I encountered it, probably about a year ago: I have a list of block elements of fixed height with variable-length textual content (100% inline). The method that works in modern browsers is table-cell display, which allows the application of vertical-align: middle; (code in situ at a test case here: barneycarroll.com/centerY.html — method a) Incidentally, while it's a relatively well-known fact that IE will force block-level display on floated inline elements, this is also true of elements with table-cell display in all the modern browsers I tested that, so I had to use nesting, and float a superfluous parent element. In any case, IE < 8 don't acknowledge display: table-cell. So my thinking was that using even more markup bloat, I could set up a set of nested relatively positioned elements with clearfixes/zooms (to force new rendering contexts — I've used Nicole Sullivan's method embedded in OOCSS grids.css) to infer the right fractional metrics and achieve the desired effect (method b). The thinking here runs roughly as follows: 1. Set the fixed metrics of the parent element. 2. Make its immediate child wrap its descendants, and position it at an offset of 50% of the parent's height relative to the top. 3. Make the above element's child wrap its contents (like the parent), and position it relative — again to the same parent, than position it -50% offset to the parent's top. My question is this: why does the grandchild in method b (.centerYb_child2) calculated the fractional metric based on its grandparents dimensions, not its parents? Surely, a relative child with a relative parent should infer from /that/ box? But more generally, the deeper question is how do I get the desired effect (as method a works in Chrome, FF, Opera, etc) to work at all in IE6 & 7 without resort to script? Regards, Barney Carroll [email protected] 07594 506 381 ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
