1 Replies - 467 Views - Last Post: 08 March 2014 - 05:09 PM

#1 osiris-web  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 08-March 14

Transition issue on :visited links (IE)

Posted 08 March 2014 - 03:06 PM

Hi,

I have the following menu which has the following effect using CSS, which works fine in all browsers except for Internet Explorer (9+):

Move your mouse over a link, the text colour and text-shadow then transitions into (fades into) the text colour & text-shadow style as set in the :hover CSS - then move your mouse away from the link and the text colour and text-shadow in the :hover CSS then transitions (fades out) back to the 'original' style as set in the a:link CSS.

Now - the concept works as it should in all browsers, even Internet Explorer - except for in Internet Explorer, if any of the links has been visited, the transition from :hover back to the 'original' style set in the a:link, does not transition back, it simply just switches back to the original a:link text colour - but the weird thing is that the :hover text-shadow does transition back to the 'original' a:link text-shadow style - it's only the text colour that does not transition back. In all other browsers, the transition of the text colour (on :hover) does transition back (even if a link has been visited) to the 'original' (a:link) text colour as well as the text-shadow.

Can anyone help ascertain why the text colour in Internet Explorer doesn't transition back, even though the text-shadow does?

Here's my menus HTML and CSS:

HTML
<ul id="osirisnavlist">
	<li><a href="linkhere.php" class="osirisnav"><span class="menu">Link 1</span></a></li>
	<li><a href="linkhere2.php" class="osirisnav"><span class="menu">Link 2</span></a></li>
	<li><a href="linkhere3.php" class="osirisnav"><span class="menu">Link 3</span></a></li>
	<li><a href="linkhere4.php" class="osirisnav"><span class="menu">Link 4</span></a></li>
	<li><a href="linkhere5.php" class="osirisnav"><span class="menu">Link 5</span></a></li>
</ul>


CSS
a:link.osirisnav, a:visited.osirisnav {
	font: 20pt MuseoLite, "Myriad Pro", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-weight: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0px 2px 3px #000;
	transition: color #C2C2C2 2s ease, text-shadow 0px 2px 3px #000 2s ease;
	transition-duration: 2s;
}

a:hover.osirisnav {
	font: 20pt MuseoLite, "Myriad Pro", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-weight: normal;
	text-decoration: none;
	color: #C2C2C2;
	text-shadow: 0px 5px 6px #000;
}


I've also tried it using separate a:link {} and a:visited {} - instead of having the two 'joined' like a:link.osirisnav, a:visited.osirisnav {} - it just provides the same results...

I've also tried the following, slightly altered CSS, which was provided to me to try resolve the issue, which didn't work:

CSS Variation
ul#osirisnavlist,a:link, a:visited {
	font: 20pt MuseoLite, "Myriad Pro", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-weight: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0px 2px 3px #000;
	transition: color #C2C2C2 2s ease, text-shadow 0px 2px 3px #000 2s ease;
	transition-duration: 2s;
}
ul#osirisnavlist a:hover {
	font: 20pt MuseoLite, "Myriad Pro", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	font-weight: normal;
	text-decoration: none;
	color: #C2C2C2;
	text-shadow: 0px 5px 6px #000;
}


Thanks a lot in advance for any help you're able to provide, and hopefully a solution to the issue.

Regards,

OW

Is This A Good Question/Topic? 0
  • +

Replies To: Transition issue on :visited links (IE)

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3524
  • View blog
  • Posts: 12,033
  • Joined: 12-December 12

Re: Transition issue on :visited links (IE)

Posted 08 March 2014 - 05:09 PM

a:link.osirisnav, a:visited.osirisnav {

These, and the one for a:hover, should be:
a.osirisnav:link, a.osirisnav:visited {

although the ul has an id so the class-names seem a little redundant.

For this:
ul#osirisnavlist,a:link, a:visited {

I assume you intended:
ul#osirisnavlist a:link, ul#osirisnavlist a:visited {

The spans directly inside the a-links (with class-name 'menu') also seem redundant, and could confuse the issue.

This post has been edited by andrewsw: 08 March 2014 - 05:10 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1