homepage Welcome to WebmasterWorld Guest from 54.237.71.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
visited links not changing colour
dupalo




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

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




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

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




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

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

seoskunk




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

Ok good to know

dupalo




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved