On May 1, 2009, at 12:46 AM, Sarah McCall wrote:
> I think I've managed to get both working up to a point, but for some
> reason the css link code ('meet_the_team_link a' and
> 'meet_the_team_link a:hover') cause the imaage to cut off on the right
> hand side.
>
> You can see it in practice here:
>
> http://homepage.ntlworld.com/sarah.mccall/storytelling/
>
> I've left the background image showing in the original
> 'meet_the_team_link' div so you can see how it should appear (this is
> correct positioning, but ultimately should be removed as we only need
> the 'meet_the_team_link a' image otherwise one overlaps the other ).
>
> The div is 167px wide and the image only 160px wide so there should be
> enough room for it.
You apply a width to the link, but that has no effect: a link (<a>) is
an inline element; width (and height) do not apply to inline elements
[1]. The cut-off effect you see is caused by the text wrapping. If you
add a background-colour to your link, you'll visualise better what
happens.
You'll have to make your <a> a block level element (display:block).
But for that to work, you'll need to change a few more things:
#meet_the_team_link {
background:transparent url(./meet_the_team_link.png) 0 0 no-repeat;
/*padding: 100px 0 0 0;*/ /* <-- remove */
float: left;
width:167px;
height: 100px; /* <-- change */
overflow: hidden;
margin: 0;
border: 0;
}
#meet_the_team_link a {
background:transparent url(./meet_the_team_link.png) 0 0 no-repeat;
padding: 100px 0 0 0;
width:167px;
margin: 0;
border: 0;
display:block; /* <-- add */
}
#meet_the_team_link a:hover {
background-position: 0px -101px;
/*padding: 100px 0 0 0;
margin: 0;
border: 0;*/ /* <-- those 3 lines are redundant, remove */
}
[1] http://www.w3.org/TR/CSS21/visudet.html#propdef-width
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/
