Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Scotland, United Kingdom
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Transition issue on :visited links - Internet Explorer

    Hi,

    I have the following CSS which results in when you hover your mouse over the link, the text-shadow and :hover colour transitioning in (fading in), and when you move your mouse off the link, it transitions out back to the original a:link 'state'. This works fine in all browsers except for Internet Explorer.

    The issue I am experiencing in Internet Explorer is that when you move your mouse off the link, the colour of the link doesn't "transition out" (fade out) back to the a:link colour - it simply goes from the :hover colour straight back to the a:link colour without any transitioning effect - whereas with other browsers, the transition effect does happen and it fades back to the original a:link colour - just not in Internet Explorer, yet the text-shadow :hover state does transition back to original a:link text-shadow. I would like to know where I am going wrong in regards to the transitioning of the :hover colour back to the a:link colour.

    The transition from the :hover colour back to the a:link colour DOES WORK in Internet Explorer until one of the links has been visited (clicked on) - if the link hasn't been visited (clicked on) then the transition from the :hover colour & text-shadow does transition back to the a:link colour & text-shadow (in all browsers) - it's just if the link has been visited (only in Internet Explorer) then the transition of the :hover colour does not transition back to the a:link colour - yet the text-shadow :hover does transition back to the a:link text-shadow (it's just the colour that doesn't transition back), it simply just changes back to the a:link colour (without any transition effect) - but as mentioned, in any other browser except Internet Explorer, the transition effect does take place, even if the link has been visited or not...

    Can anyone see a reason for this in my code, and if so, can anyone please help me find a solution for this.

    My HTML

    Code:
    <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>
    My CSS

    Code:
    #header 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;
    }
    #header 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 {}

    Thank you in advance for any help/assistance anyone is able to provide. As I say, it's only an issue in Internet Explorer if a link has been visited, otherwise it works fine.

    Regards,

    OW

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try this css

    Code:
    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;
    }

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Scotland, United Kingdom
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi, thanks for your reply and snippet to try.

    I tried it using the CSS you posted, however the effect on the link which happens when a link has been visited (using my CSS) does the exact same thing with the CSS you provided, only this this time the effect doesn't work on any of the links whether it has been visited already or not.

    Would it be helpful if I make a test page showing the menu so you can view it on both Internet Explorer (which is were I am having the issue with the link whenever one of the links has been visited - the effect when moving your mouse off the link doesn't transition back to the a:link colour, it just goes back to the colour) and other browsers.

    The weird thing is that the text-shadow (on hover) does transition back to the text-shadow properties (a:link) - it's just the colour of the text (on hover) doesn't transition back (to the text colour a:link) when you've :visited any of the links...

    OW

    Quote Originally Posted by tempz View Post
    Try this css

    Code:
    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;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello osiris-web,
    This works for me. I just got rid of both the redundant and invalid CSS.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #header a:link.osirisnav, #header a:visited.osirisnav {
    	font: 20pt MuseoLite, "Myriad Pro", "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
    	font-weight: normal;
    	text-decoration: none;
    	color: #fff;
    	text-shadow: 0 2px 3px #000;
    	color: #c2c2c2;
    	-webkit-transition: all 2s ease;
    	-o-transition: all 2s ease;
    	transition: all 2s ease;
    	/*transition: color #c2c2c2 2s ease, text-shadow 0 2px 3px #000 2s ease;
    	transition-duration: 2s;*/
    }
    #header a:hover.osirisnav, #header a:active.osirisnav { text-shadow: 0 5px 6px #000; }
    </style>
    </head>
    <body>
    	<div id="header">
    		<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>
    	<!--end header--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •