[css-d] display:inline-block Rendering Differences
While experimenting with display:inline-block, I was surprised to find differences in rendering by three current browsers, viz. Chrome 11, Firefox 4 and Opera 11.10. Internet Explorer 8 and Safari's rendering is the same as Chrome 11. Here's the page: http://roughtech.com/t/centering_multi.html What's going on? Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] 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] display:inline-block Rendering Differences
On May 3, 2011, at 2:30 AM, Chetan Crasta wrote: While experimenting with display:inline-block, I was surprised to find differences in rendering by three current browsers, viz. Chrome 11, Firefox 4 and Opera 11.10. Internet Explorer 8 and Safari's rendering is the same as Chrome 11. Here's the page: http://roughtech.com/t/centering_multi.html What differences do you see or think to see ? Your copy of Chrome uses a different font than your copy of Firefox. The text in the first box wraps in Firefox but not in Chrome due to this. As a consequence, the second and third box move up/down. That is expected. And note this: The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] 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] display:inline-block Rendering Differences
I fixed the problems with that first test, I have specified the font size and font family: http://roughtech.com/t/centering_multi1.html Opera 11 still renders the page differently from other browsers. Is that a bug? The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align Thanks for that. Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] 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] display:inline-block Rendering Differences
On May 3, 2011, at 2:21 PM, Chetan Crasta wrote: I fixed the problems with that first test, I have specified the font size and font family: http://roughtech.com/t/centering_multi1.html Opera 11 still renders the page differently from other browsers. Is that a bug? Yes. The bottom of the image should be aligned with the bottom of the text-string to the left of it. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] 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/
