I'm trying to get my head round image replacement and using css for
rollovers instead of javascript (sorry I know I'm behind the times
somewhat).
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.
This is the HTML code:
<body>
<div id ="wrapper">
<div id ="left_hand_column">
<div id ="welcome_girl">
 
</div>
<div id="meet_the_team_link"><a href="/meet_the_team.htm">Meet the
storytelling team</a></div>
</div>
</div>
</body>
</html>
and this is the css code:
#left_hand_column {
width: 240px;
height: 700px;
margin: 0;
border: 0;
}
#welcome_girl {background:transparent url(../images/welcome_girl.png)
0 0 no-repeat;
float: left;
width:73px;
height: 100px;
margin: 0;
border: 0;
}
#meet_the_team_link {
background:transparent url(../images/meet_the_team_link.png) 0 0 no-
repeat;
padding: 100px 0 0 0;
float: left;
width:167px;
height: 0px;
overflow: hidden;
margin: 0;
border: 0;
}
#meet_the_team_link a {
background:transparent url(../images/meet_the_team_link.png) 0 0 no-
repeat;
padding: 100px 0 0 0;
width:167px;
margin: 0;
border: 0;
}
#meet_the_team_link a:hover {
background-position: 0px -101px;
padding: 100px 0 0 0;
margin: 0;
border: 0;
}
Any suggestions about where to start looking for a solution to this
problem would be really appreciated. I've spent all day on it and feel
I'm getting nowhere.
Many thanks
Sarah
______________________________________________________________________
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/
