Sent by Tracy Shorrock on 29 October 2004 02:02
Hi, me again!
I've been working on my page again, desperate to use as much css as
possible. However, there are a couple of javascripts in there.
http://www.freelancealot.co.uk/tobyvandevelde/attempt6.html
http://www.freelancealot.co.uk/tobyvandevelde/main.css
Q. I've now applied an inline list to the telephone and e-mail 'icons'
on the right of the page (above the whale photos). So one <li> shows
the telephone image and the other the e-mail image, and there is a
:hover statement attached to each one showing a 'glowing' version of
the normal image.
As you roll-over each one a div slides up from the bottom of the window
with the appropriate info on it. (this is the javascript enabled part).
This works perfectly in Mac - IE 5.2, Safari and Firefox. [And has been
validated. I've tried to validate the XHTML but unfortunately a
necessary <layer> tag in the javascript makes it fail. Just that and
the <bgsound> tag.]
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 {width: 140px; }
#telcontainer ul {
margin: 0;
margin-top: 300px;
padding: 0;
list-style-type: none;
font-family: Impact, Helvetica, Arial, sans-serif;
font-size: 3em;
font-style: normal;
font-weight: normal;
text-align: center;
white-space: nowrap;
}
#telcontainer a {
padding: 0px;
width: 40px;
\width: 40px;
w\idth: 40px;
height: 41px;
color: #ddd;
text-decoration: none;
outline: none;
}
#telcontainer a:link, #tellist a:visited
{
color: #ddd;
text-decoration: none;
background: url(images/telephone_off.jpg) no-repeat top;
}
#telcontainer a:hover, #tellist a:active
{
color: #006192;
text-decoration: none;
background: url(images/telephone_on.jpg) no-repeat top;
}
#tellist li
{
display: inline;
list-style-type: none;
}
#tellist li.email a:link, #tellist a:visited
{
color: #ddd;
text-decoration: none;
background: url(images/email_off.jpg) no-repeat top;
}
#tellist li.email a:hover, #tellist a:active
{
color: #006192;
text-decoration: none;
background: url(images/email_on.jpg) no-repeat top;
}
Thanks for any pointers.
Cheers,
Tracy
______________________________________________________________________
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/