Re: [css-d] centering block elements in IE 6.0 fails
Hello, almost two years ago I had trouble horizontally centering an absolutely positioned element: On Tuesday 24 October 2006, Gunlaug Sørtun wrote: Daniel Kabs wrote: Please see the test page at http://www.mobotixserver.de/~daniel/css_center_horizontally.html The page works on Firefox and Konqueror but not on IE 6.0 (SP2). ... IE6 can *not* relate A:P elements to opposite sides of parent-container, so only one of these properties is used... left: 0; right: 0; ...not both. IE ends up positioning '.center' according to 'left: 0;' and ignores 'right: 0;'. Result: the auto-margins becomes useless in that browser. I found a workaround by setting the element to relative positioning and wrapping it with an absolutely positioned element instead. This now works on IE 6 and 7, too. I updated the test page and the css wiki page accordingly. Cheers Daniel __ 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/
Re: [css-d] centering block elements in IE 6.0 fails
On Tuesday 24 October 2006 14:24, Gunlaug Sørtun wrote: Yes, IE6 centers block-element by auto-margins when in standard compliant mode, but there's a flaw in IE when it is served absolute positioned elements. As I wrote before, I read about the Centering with auto-margins technique in Eric Meyer's book CSS The definitive Guide. Applying this technique for centering horizontally, Eric gives an example where an outer DIV with relative positioning wraps an inner one with absolute positioning. Two pages on, Eric gives a similar example for vertically centering, but this time he states that no version of IE supported the vertical-centering behavior ..., i.e. explicitly limiting the flaw to vertically centering. So I was in doubt about whether I did something wrong. Thanks for acknowledging that IE is the flaw :-) Result: the auto-margins becomes useless in that browser. Any workarounds available? I used absolute positioning to take the element out of the normal page flow and display it on top of other text (with opacity applied). I reckon, floated elements can not be used instead. Cheers Daniel __ 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/
Re: [css-d] centering block elements in IE 6.0 fails
Daniel Kabs wrote: I tried to apply the Centering with auto-margins technique according to http://css-discuss.incutio.com/?page=CenteringBlockElement Please see the test page at http://www.mobotixserver.de/~daniel/css_center_horizontally.html The page works on Firefox and Konqueror but not on IE 6.0 (SP2). Yes, IE6 centers block-element by auto-margins when in standard compliant mode, but there's a flaw in IE when it is served absolute positioned elements. IE6 can *not* relate A:P elements to opposite sides of parent-container, so only one of these properties is used... left: 0; right: 0; ...not both. IE ends up positioning '.center' according to 'left: 0;' and ignores 'right: 0;'. Result: the auto-margins becomes useless in that browser. --- Other browsers will use both properties - which cancels them out since the element has dimensions. Thus they end up balancing the element horizontally so the auto-margins can act. Result: perfect centering. regards Georg -- http://www.gunlaug.no __ 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/
