Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
rossace23
3,819 Points"Visited" box appears around my nav titles...
Hello Treehouse Forums,
I have just finished styling my nav bar on my website, but I noticed that when I click my nav elements and return to them on the home page a moment later, a white dotted box appears around the clicked link indicating that it has already been visited.
I including a fix for this in my CSS as the videos instructed, so I am not sure why the box is still appearing.
I can adjust my color scheme so that things simply blend in, but is there a way to fix this properly that I am missing?
Any help would be great. Thanks!
Ross
7 Answers
Marc Busby
35,550 PointsI just tried what you have done and I get the box too but when I press tab it skips to the contact box. So i think it is just focusing. However my CSS fix doesn't solve the issue. It might be something inherent with Firefox.
Try this instead:
a:focus {
text-decoration: none;
border-style: none;
outline: none;
}
rossace23
3,819 PointsFair enough - nope that didn't work either. Same issue persists...
Greg Kaleka
39,021 PointsHi Ross,
Not sure which videos you're referring to, and to me it sounds like this is expected behavior. Once you've gone to a page, any css you have in place to style links that have been visited should take hold. The reason the problem "went away" when you opened another browser is because you simply had not visited those pages in that browser.
Do you not want an indication of a visited page? If that's the case, we can help, but we'll need to see your code first - both HTML and CSS. Check out the Tips for asking questions video in the right sidebar ->
Best,
-Greg
rossace23
3,819 PointsHi Greg,
Sorry for the late reply to this. Thanks for your help! The videos I am referring to are the HTML "Styling Web Pages and Navigation".
No I don't want an indication of a visited page. Here is my HTML and CSS code below. Basically, my problem is that if I click my "About" tab in my portfolio page nav, and then I hit the back button on my browser, a strange dotted white box appears around my clicked "About" tab. This problem doesn;t happen if I go back to the portfolio page by simply clicking "portfolio". The problem also doesn't happen on Safari, so I am wondering why Firefox does this when I click the back button.
Let me know if you need to see more CSS code, but this should be the only part that is relevant...
<html>
<head>
<meta charset="utf-8">
<title>Linda Sheppard | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Linda Sheppard</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #00f;
}
Marc Busby
35,550 PointsHi Ross,
As Greg mentioned it's likely behaving correctly. If you want to remove it you could try clearing your cache in Firefox, or if you want to remove it entirely so it never happens you can remove it from the CSS by setting properties for the a:visited element.
Regards,
Marc Busby
35,550 PointsHi again Ross,
I'm not 100% but it sounds like the link is being focussed by Firefox. Maybe because it was clicked and then when you click back Firefox is remembering it. You can test this by adding some CSS using the pseudo class a:focus { }
Regards,
rossace23
3,819 PointsThanks Marc, for your quick reply. Not sure what you mean by adding that pseudo class. Is there a way you can show me an example in some code? Would I attach the class to my about list item in my nav html?
Marc Busby
35,550 PointsHi there,
I've added some code below but not sure if this is actually the issue, but I can't think of any other reason for it. As you go through the courses (CSS ones) you'll learn more about pseudo classes.
a:focus {
text-decoration: none;
border-style: none;
}
What this should do is remove any styling on focused links. Out of interest when you click 'back' and see the dotted border, if you press the TAB key does the box move to a different link?
Regards,
rossace23
3,819 PointsThanks Marc, yes Ill try this out - it will no doubt be clearer to me once I go through more css lessons.
And when I press the TAB key, the dotted box disappears. It doesn't move to a different link. I also noticed that these boxes appear around any of the clickable links on my entire page (when I press the back button, it also appears around my header, or the individual images, etc., but then disappears whenever I press the TAB key)
Marc Busby
35,550 PointsHmm try removing the a so it's just :focus you could also try a:active
rossace23
3,819 PointsYes it actually works now with including a:focus. Thanks! That is a relief.
Ok so one more issue still persists - when I hit the back button, the dotted box is now gone, but the visited link remains highlighted until I move my cursor. As soon as I move my cursor, the link becomes un-highlighted (which is what I want), but I am not sure why it takes a move of the cursor for it to become un-highlighted.
Marc Busby
35,550 PointsHi Ross,
Glad it worked! Remember to upvote the answers that solve the issue :)
As for the problem of the link staying highlighted I suspect that's a browser caching issue. You could try playing with the a:hover and a:active pseudo classes and adding or removing styling from them but I think it's probably just Firefox remembering that you clicked it and it was set to active.
Regards,
rossace23
3,819 Pointsrossace23
3,819 PointsJust tried opening my page on safari instead of firefox, and that seemed to remedy the issue. Still not sure why the "already visited" dotted box appears around my clicked links on firefox though...