Philippe Wittenbergh wrote:
Re: <http://www.mcmullincreative.com/crows/>
> On Nov 10, 2009, at 4:51 AM, Climis, Tim wrote:
>
>> The extra padding is coming from the rule in line 122
>>
>> .sidebar-item h3, p, a {
>> padding: 3px 19px;
>> }
>>
>> The link is getting some height that floats over to the text, and is
>> going above the heading. If you remove the padding from the style,
>> it stops. I don't know why. I'll leave that to more experienced
>> people on the list.
>
> The <a> is an inline element that gets 3px top- and bottom-padding and
> generates a line box. It thus does takes up space. But the actual
> content of the link <a>, an image, is floated and moved to the left in
> the containing block.
>
> What Firefox does seems completely correct to me.
> Float the <a>, move the styling from the <img> to the <a> and you
> should be good to go.
>
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/
On the surfaces that may be true but the image is escaping the anchor
(by being floated?) which is showing some mysterious padding in Gecko
1.9 and Opera 10 and IE8.
<http://css-class.com/x/anchor-image.htm>
.content-item a {
background: red;
}
<http://css-class.com/x/anchor-image2.htm>
.content-item a {
background: red; padding: 0;
}
Why is a phantom box for the anchor (parent colored red) showing? Where
is the padding coming from? Allowing for 3px at the top and 3px at the
bottom of the anchor, there is still 20px of height.
Why is this anchor offset by the image (child)? Removing the
margin-top:20px from the selector ".content-item img" does not affect
this anchor.
<http://css-class.com/x/anchor-image3.htm>
I would presume that since the image is taken out of the flow, the
anchor should render as an empty element. The last section of this
construction (in each above test) is am empty anchor.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@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/
