1. Home
  2. Forums Index
  3. Browser Side / CSS 12:14 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

visited links not changing colour

         

dupalo

7:46 pm on Feb 24, 2013 (gmt 0)

10+ Year Member



Hi all, I wonder if you can help me with this.
I have a couple of issues with the following code
Here's the html: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>


<title>FAQ</title>
</head>
<body>
<div id="Wrapper">

<div id="thePage">
<!-- START OF NAV-->
<div id="mainNav">
<ul>
<li><a href="http://www.bbc.co.uk/news/">BBC</a></li>
<li><a href="http://uk.reuters.com/">Reuters</a></li>
<li><a href="#" id="selected">FAQ</a></li>
<li><a href="http://news.sky.com/">Skynews</a></li>
</ul>
<div class="clear"></div>
</div>

<!-- END OF NAV-->


<!-- START OF MAIN CONTENT -->
<div id="content">
<div id="theContent">
<h1>Frequently asked faqs</h1>
<p class="faq"><a href="#question1" class="linkStyle">Question n1</a></p>
<p class="answ" name="question1">
This is the answ to the 1st FAQ faq that has been clicked to show how the answ would display. This is 
the answ to the FAQ faq that has been clicked to show how the answ would display.
</p>
<p class="faq"><a href="#question2" class="linkStyle">Question2?</a></p>
<p class="answ" name="question2">This is the answ to the 2st FAQ faq that has been clicked to show how the answ would display. This is 
the answ to the FAQ faq that has been clicked to show how the answ would display.
</p>
<p class="faq"><a href="#question3" class="linkStyle">Question3?</a></p>
<p class="answ" name="question3">This is the answ to the 3rd FAQ faq that has been clicked to show how the answ would display. This is 
the answ to the FAQ faq that has been clicked to show how the answ would display.</p>
<p class="faq"><a href="#question4" class="linkStyle">Question4?</a></p>
<p class="answ" name="question4">This is the answ to the 4th FAQ faq that has been clicked to show how the answ would display. This is 
the answ to the FAQ faq that has been clicked to show how the answ would display.</p>

</div>


<h2>Index:</h2>
<p id="lastPara"><a href="#abc" class="link linkStyle">ABC</a> <a href="#def" class="link linkStyle">DEF</a> <a href="#ghi" class="link linkStyle">GHI</a> <a href="#jkl" class="link linkStyle">JKL</a> <a href="#mno" class="link linkStyle">MNO</a> <a href="#pqr" class="link linkStyle">PQR</a> <a href="#stu" class="link linkStyle">STU</a> <a href="#vwx" class="link linkStyle">VWX</a> <a href="#yz" class="link linkStyle">YZ</a></p>
<p>Please click on a product below to find out more information</p>
<div class="resultsBlock">
<h2 id="abc">ABC</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="def">DEF</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="ghi">GHI</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="jkl">JKL</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#"class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="mno">MNO</h2>

</div>

<div class="resultsBlock">
<h2 id="pqr">PQR</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="stu">STU</h2>
<ul>
<li><a href="#" class="linkStyle">prod</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock">
<h2 id="vwx">VWX</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>

<div class="resultsBlock last">
<h2 id="yz">YZ</h2>
<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>

<ul>
<li><a href="#" class="linkStyle">Product1</a></li>
<li><a href="#" class="linkStyle">Product2</a></li>
<li><a href="#" class="linkStyle">Product3</a></li>
<li><a href="#" class="linkStyle">Product4</a></li>
<li><a href="#" class="linkStyle">Product5</a></li>
</ul>
<div class="clear"></div>
</div>


</div><!-- end of content-->
<!-- END OF MAIN CONTENT -->


</div><!-- end of page-->
</div><!-- end of page wrapper-->
</body>
</html>


the css: 
/* reset css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family: arial,helvetica,verdana,sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* reset css*/


#Wrapper{
border:1px solid red;
max-width:100%;
margin:20px auto;
}


#thePage{
max-width:61em; 
border:1px solid black;
margin:0 auto;
min-height:40.625em;
position:relative;
}

/*mainNav*/
#mainNav{
width:61.47540983606557%;
border:1px solid transparent;
margin:20px auto;
}
#mainNav ul{
list-style-type: none;
}
#mainNav ul li{
float:left;
padding-right:9px;
}
#mainNav ul li a{
text-decoration:none;
font-size:0.875em;/* 14/16*/
font-weight:bold;
background:#b43e81 repeat-x 0 0;
color:white;
padding:5px;
border-radius:2px;
-moz-border-radius:2px;
display:block;
}
#mainNav ul li a:hover{
background:#333333 repeat-x 0 0;
}
#mainNav ul li a#selected{
background:#009aa6 repeat-x 0 0;
}


/*mainNav*/


/*CONTENT*/
#content{
width:61.47540983606557%;
border:1px solid black;
margin:0 auto;

}
/*STYLED LINKS*/
a.linkStyle{
color:#2a00ff;
}
a.linkStyle:visited{
color:#ff00ae;
}
a.linkStyle:hover{
color:#333333;
}
a.linkStyle:active{
color:#2a00ff;
} 
/*STYLED LINKS*/



/* faqS AND answS BOX */
#content #theContent p.answ{
display:none;
margin:3px 0 6px 0;
}
#content #theContent p.faq{
margin:0;
line-height:1.857142857142857em;
}

/* faqS AND answS BOX */

p a.link {
  font-size: 1.143em;
  font-weight: bold;
  margin-right: 10px;
}



.clear{
clear:both;
}


and the script: 
$(document).ready(function(){
/*script for answs and faqs*/
$("#theContent p.faq > a").click(function(e){
e.preventDefault();
var currentEle = $(this).parent().next("p.answ").toggle();
console.log(currentEle);
});
/*script for answs and faqs*/





});

Right, first issue with the four questions. When you click on them, the answer slides down ok as they should but the colour of the clicked link doestn't change as it should. If you look at the css you have 
/*STYLED LINKS*/
a.linkStyle{
color:#2a00ff;
}
a.linkStyle:visited{
color:#ff00ae;
}
a.linkStyle:hover{
color:#333333;
}
a.linkStyle:active{
color:#2a00ff;
} 
/*STYLED LINKS*/

so my clicked question should change to the visited colour but it doesn't (this is the case for every browser). Can't quite understand why.

2)Second issue, similar to the above, although it is happening only on safari.
Consider the ABC DEF GHI JKL MNO PQR STU VWX YZ anchor links. Now, in every browser when you click on any of them they change colour to the visited link. This doesn't happen in Safari only. Does anybody have any idea why this happens?
If you want I can post a link to a test page I have (I remember the moderators being against links awhile ago, not sure if this is still the case)
thanks

seoskunk

9:02 pm on Feb 24, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Changing the order in your style sheet to

a.linkStyle{
color:#2a00ff;
}

a.linkStyle:active{
color:#2a00ff;
}

a.linkStyle:hover{
color:#333333;
}

a.linkStyle:visited{
color:#ff00ae;
}

Then all will be well

Fotiman

10:49 pm on Feb 24, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The correct order is LoVeHAte (link, visited, hover, active).

seoskunk

12:58 am on Feb 25, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ok good to know

dupalo

9:12 pm on Feb 26, 2013 (gmt 0)

10+ Year Member



yep apologies, I made a mistake while copying the order is right. However it turned out safari has changed the privacy settings, and it looks like this could be the cause of it as you can see from here [apple.stackexchange.com...]
This obviously changes things quite a bit

lucy24

10:51 pm on Feb 26, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



it turned out safari has changed the privacy settings

Huh? When did they change it? Two minutes ago? I don't see any change at my end, either on pages using the default or those with explicit a: settings.

dupalo

4:42 pm on Mar 1, 2013 (gmt 0)

10+ Year Member



I don't know, that's what I read, do you think it is just rubbish?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:14 pm May 1, 2026