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 trialMike Jacoby
928 Pointsnav a, nav a:visited { color: #fff; } is not changing my links to white in chrome, ff, or ie. Same code as Nick.
I've got the same code as Nick in main.css. I've followed step by step, and quadruple checked pound signs, colon's, semi-colons, and the like, however my links are still not turning white after doing the nav a, nav a:visited. I've tried 3 browsers now. I even saw where Nick momentarily scrolled up to see if he already had a Nav ID selector, which he did not, and I double-checked that our code is the same. Have there been others who've had this same issue? I'm not sure what browser he's using, but my links are just not turning white. I've tried color: white; color: #fff; and color: #ffff; --- none of them work. Nick is using #fff; in this video.
Thanks
6 Answers
Wayne Priestley
19,579 PointsHi Mike,
I know you've checked your code, and rechecked but if you can post your html and css Heres how to post it we can not only add an extra set of eyes but we can take your code and test it ourselves, it has been known for someone to fail to get their code to work in a particular browser, only for everyone else who tries it to have no problems.
Mike Jacoby
928 PointsI saw this in the "here's how to post it" link, so I'm pasting this here:
I'm not really sure if this is even going to display. I read that howto link, but didn't see anything specific to how to post my code here, so I'm just pasting it.
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
a {
color: #6ab47b;
}
header {
background: #6ab47b;
border-color: #599a68;
}
h1, h2 {
color: #fff;
}
nav {
background: #599a68;
}
We want these colors to stay white no matter what, even if the visitor has visited, so create a pseudo
class: a:visited
And Nick says each f translates to 2 digits, so rather than ffffff, fff can be used. So could 000 for black. Tested and
verified.The issue is the links are not turning white after using the syntax below... in IE, FF, and Chrome.
nav a, nav a:visited {
color: #fff;
}
Wayne Priestley
19,579 PointsI edited your code to appear a little clearer. You can look at the Markdown Cheatsheet that has a link to it in bold near the bottom of the page.
Wayne Priestley
19,579 PointsYour css for nav a, nav a:visited
looks fine Mike, as long as your html is good I don't know why I won't work.
Mike Jacoby
928 PointsI don't know either, I did everything Nick did in his video. It was white for him. What's odd is after the next video (comment) video tutorial, he moved things around, and after doing the same, the font changed white.
I thought I heard there's a rule where order of code determines output in CSS, so was the following taking precedence:
a { color: #6ab47b; }
over nav a at the bottom?
Jason Anello
Courses Plus Student 94,610 PointsNo, it shouldn't have been. nav a
is more specific of a selector and would take precedence.
Tj McClearin
Courses Plus Student 1,703 PointsSame for me
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
a { color: #6ab47b;}
header {background: #6ab47b; border-color: #599a68;}
h1, h2 {color: #fff;}
nav {background: #599a68;}
nav a, nav a:visted {
color: #fff;
}
Jason Anello
Courses Plus Student 94,610 PointsHi Tj,
You have a typo on nav a:visted
Tj McClearin
Courses Plus Student 1,703 PointsYeah I'm a horrible speller :-P thanks!
Tj McClearin
Courses Plus Student 1,703 PointsAll my html from index.html
<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>Xcape Inc. | ITaaS</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Xcape, Inc.</h1>
<h2>ITaaS</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="book-a-tech.html">Book-A-Tech</a></li>
<li><a href="http://**************" target="_blank">Blog</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with Color and Texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with Blending Modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating Shapes using Repetition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://***************************"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://***************************"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Xcape, Inc.</p>
</footer>
</div>
</body>
</htmL>