Re: [css-d] about inline, replaced element
Thanks for you reply. I had read your some articles about CSS, they are great! I also have some questions: 1. I think the container box of the img element is the parent block-level element of a right? 2. Because the inline box generated by a is the only inline box of its line box, so the baseline of the line box is also the baseline of the a inline box, so the img inline box is aligned with baseline of the a element, right? 3. Because the img resides in the a element, so the img inline box is contained within the a inline box and the width of the img inline box becomes the width of the a inline box? All the best. On Thu, Nov 20, 2008 at 4:36 AM, Ingo Chao [EMAIL PROTECTED] wrote: ray wrote: ... a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a where the img would be positioned? and why? The initial value for vertical-align, baseline, applies. It affects the inline level elements in a line box. Therefore, the image, being inline by default, should align with the baseline of the parent a-element. CSS 2.1: 9.4.2 Inline formatting context; CSS 2.1: 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties. The absolute vertical position of the baseline depends on the font metrics. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.com __ 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] about inline, replaced element
I'm not sure I understand the specification here, so maybe someone else helps me with answering your questions. ray wrote:... 1. I think the container box of the img element is the parent block-level element of a right? both the inline-box of a and the inline-box of its descendant img live in the same containing block, a rectangle that is established by the nearest block level element (in this case probably body). The line box build by the inline boxes starts at the top of this containing block. 2. Because the inline box generated by a is the only inline box of its line box, so the baseline of the line box is also the baseline of the a inline box, so the img inline box is aligned with baseline of the a element, right? I think yes. 3. Because the img resides in the a element, so the img inline box is contained within the a inline box and the width of the img inline box becomes the width of the a inline box? The width? The width of the construct is determined by the width of the image. The inline box of a stretches to fit this width. If the width is wider than the width of the containing block, the line box may overflow the containing block. On Thu, Nov 20, 2008 at 4:36 AM, Ingo Chao [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a The initial value for vertical-align, baseline, applies. It affects the inline level elements in a line box. Therefore, the image, being inline by default, should align with the baseline of the parent a-element. CSS 2.1: 9.4.2 Inline formatting context; CSS 2.1: 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties. The absolute vertical position of the baseline depends on the font metrics. regards, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.com __ 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] about inline, replaced element
Hi ray, i'm not sure I've understood what you ask. But it's easy to do the proof and see what happens. :-) I've done it and the anchor element works as parent. So if there is text inside the element a its font-size gives the position of the element img but it does not resize it. iñ 2008/11/19 ray [EMAIL PROTECTED] Hi, All What if an inline, replaced element resides in another inline element? for example: a href=#img src=foo.jpg //a How the image would be positioned with respect to the anchor element? For instance, if the font-size set on the anchor is very large and the height set on img is very small, for example: a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a where the img would be positioned? and why? I searched the CSS 2.1 specification, but didn't find any information. Could somebody help me out? Thanks in advance. All the best __ 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/ -- Iñigo Medina García Tecnología http://www.toprural.com Tu guía de turismo rural __ 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/
[css-d] about inline, replaced element
Hi, All What if an inline, replaced element resides in another inline element? for example: a href=#img src=foo.jpg //a How the image would be positioned with respect to the anchor element? For instance, if the font-size set on the anchor is very large and the height set on img is very small, for example: a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a where the img would be positioned? and why? I searched the CSS 2.1 specification, but didn't find any information. Could somebody help me out? Thanks in advance. All the best __ 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] about inline, replaced element
From: ray [EMAIL PROTECTED] Date: Wed, 19 Nov 2008 11:29:53 +0800 To: css-d@lists.css-discuss.org Subject: [css-d] about inline, replaced element Hi, All What if an inline, replaced element resides in another inline element? for example: a href=#img src=foo.jpg //a How the image would be positioned with respect to the anchor element? For instance, if the font-size set on the anchor is very large and the height set on img is very small, for example: a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a where the img would be positioned? and why? I searched the CSS 2.1 specification, but didn't find any information. Could somebody help me out? Thanks in advance. All the best The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. See http://htmlhelp.com/reference/css/text/vertical-align.html. --- Alyda __ 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/
