Sent by Larry Israel on 29 October 2004 11:11
I can point you to a couple problems, but probably not all of them.
> http://www.freelancealot.co.uk/tobyvandevelde/attempt6.html
> http://www.freelancealot.co.uk/tobyvandevelde/main.css
....
> However, my client using IE6 on a pc says that it shows two telephone
> images instead of the telephone then the e-mail image (@). But when she
> rolls over the second telephone image - on the right - the correct
> 'glowing' @ hover image appears. I'm assuming it's something to do with
> the #tellist li.email a:link, #tellist a:visited bit.
>
> What's going on? Can anyone point out my mistake.
> #telcontainer a {
> padding: 0px;
> width: 40px;
> \width: 40px;
> w\idth: 40px;
> height: 41px;
> color: #ddd;
> text-decoration: none;
> outline: none;
> }
You can't set a width on an inline element. Not unless you change it to
display: block.
This sets #tellist a:visited to telephone_off.jpg:
> #telcontainer a:link, #tellist a:visited
> {
> background: url(images/telephone_off.jpg) no-repeat top;
> }
>
> #telcontainer a:hover, #tellist a:active
> {
> background: url(images/telephone_on.jpg) no-repeat top;
> }
The next rule changes #tellist a:visited to email_off.jpg:
> #tellist li.email a:link, #tellist a:visited
> {
> background: url(images/email_off.jpg) no-repeat top;
> }
>
> #tellist li.email a:hover, #tellist a:active
> {
> background: url(images/email_on.jpg) no-repeat top;
> }
You're missing a couple "li.email"s.
I find the selectors confusing (tho not the cause of the problem). Why not
be consistent and stick to either #telcontainer or #tellist. They point to
the same place, so are interchangable in the code above. #tellist is
nested inside #telcontainer:
<div id="telcontainer">
<ul id="tellist">
I think this is what you want:
#tellist a:link, #tellist a:visited
{
background: url(images/telephone_off.jpg) no-repeat top;
}
#tellist a:hover, #tellist a:active
{
background: url(images/telephone_on.jpg) no-repeat top;
}
#tellist li.email a:link, #tellist li.email a:visited
{
background: url(images/email_off.jpg) no-repeat top;
}
#tellist li.email a:hover, #tellist li.email a:active
{
background: url(images/email_on.jpg) no-repeat top;
}
Larry
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/