On Nov 10, 2009, at 10:29 PM, Alan Gresley wrote:
> 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.
Line box. In the first testcase, where the anchor has padding, the box
is actually 25px tall, according to the DomInspector/Firebug. 6px
padding, 16px/19px font-size/line-height (computed value for 'normal'
line-height with Helvetica @ 16px on my system).
> 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.
Normal behaviour for inline content in its relationship to floats ?
That is all your basic CSS2.1:9.5.
> 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.
The img is taken out of the flow. But the inline element (<a>) has
padding, it is rendered and takes up space, and affects the layout.
---
(
and, as someone else mentioned in this thread, the OP probably didn't
intent to have all 'a' elements to have padding as specified by this
.sidebar-item h3, p, a {
padding:3px 19px;
}
The OP probably wanted .sidebar-item h3, .sidebar-item h3 p, .sidebar-
item h3 a {}
)
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
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/
