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

Watch Video

Posted March 16, 2014 6:32pm by

My twitter name wont show up

In both about and contact page my twitter name is invisible but if i highlight it i can see it. What could be the problem

March 16, 2014 6:47pm

<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=timmyty33">@timmyty33</a></li> <p>If you'd like to follow me on twitter, my username is <a href="http://twitter.com/timmyty33">@timmyty33</a></P>

March 16, 2014 6:50pm

I thought it would be a problem with the color of the links but both my email and phone number do show up. And when i loaded the contact page for first time it was there then clicked it to make sure it works and its invisible now> When I click the other links that does not happen

March 16, 2014 6:52pm

/********************
GENERAL
*********************/

body {
    font-family: 'Open sans', sans-serif;
} 

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
} 

a {
    text-decoration: none;
} 

img {
    max-width: 100%;

}

h3 {
    margin: 0 0 1em o;
} 


/********************
HEADING
*********************/

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
} 

h1 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}


/********************
 NAVIGATION
*********************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/********************
FOOTER
*********************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
} 

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/********************
PAGE:PORFOLIO
*********************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
} 

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
} 


/********************
PAGE: ABOUT
*********************/

.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
} 



/********************
COLORS
*********************/

/* site body*/
body {
    background-color: #fff;
    color: #999;
} 

/*green header*/
header {
    background: #6ab47b;
    border-color: #599a68;
} 

/*nav background on mobile*/
nav {
    background: #599a68;
} 

/*logo text*/
h1, h2 {
    color: #fff;
} 
/*links*/
a {
    color: #6ab47b;
}

/*nav links*/
nav a, a:visited {
    color: #fff;visited
} 

/*secected nav link*/
nav a.selected, nav a:hover {
    color: #32673F;
}

March 16, 2014 7:47pm

Once again thank you both so much

12 Answers

March 16, 2014 7:26pm

it's the comma after nav a------ making a:visited a seperate item not part of the nav a

nav a, a:visited

March 16, 2014 7:29pm

Oh okay so that's the problem then I didn't think it would be because in his video he also clicked the twitter link and it didn't disappear and I thought we had the same CSS but i guess not. Thank you!

March 16, 2014 7:32pm

I removed the visited color and yes it works I feel like i should have known that myself but the whole nav links comment i did in another video threw me off

March 16, 2014 6:41pm

It would help if you post the code.

March 16, 2014 6:41pm

Post the relevant html and css if you can.

I can only guess right now that the color of your twitter name matches the background color.

If your web pages are live and can be viewed then post the link and you can probably get better help.

March 16, 2014 6:53pm

Can you post the link to your site?

March 16, 2014 6:56pm

I didn't put it online yet im still working on it

March 16, 2014 6:58pm

when you click on it it disappears

/*nav links*/
nav a, a:visited {
    color: #fff;visited
}

so it's a visited - and it becomes white

Is your background white as well?

March 16, 2014 7:02pm

Nope its not part of the nav its in the "section" the background is white but the twitter name is the only link to have a problem

March 16, 2014 7:05pm

I took a screen shot of my page and uploaded it as my profile pic

March 16, 2014 7:08pm

You beat me to it.

Yes, it does look like the background is white.

Also, you should not have "visited" after your semicolon when setting the color.

You can run your pages through the validators at w3c and I believe they can give warnings when you have foreground and background colors the same.

March 16, 2014 7:17pm

Oh yea i never realized that "visited" was there. I'm going to try w3c because i don't understand, I have not done any styling to that page yet maybe that's the problem but I also don't understand why its the only link doing it. I thank both of you's for taking the time to help me out

March 16, 2014 7:05pm

Can you post a link to your site? Is it live?

March 16, 2014 7:08pm

No its not live all i can do is screen shot but you cant seem to see it in my profile pic

March 16, 2014 7:15pm

If it's not yet live, make a codepen

March 16, 2014 7:13pm

and ...."twitter name is the only link to have a problem"

isn't that the only real link?

March 16, 2014 7:24pm

The email could be a link. If the email is a link, try clicking on that one too and see if it disappears like the twitter name.

Or temporarily make it a mailto: link if it isn't and see if the same thing happens.

March 16, 2014 7:17pm

You mentioned that it disappeared after you clicked on it. This would make it a visited link and as Marsha mentioned, you have css that is setting it to white.

I would remove the error in your css that I mentioned if you haven't already in case that's causing any trouble.

Please post you entire list code for that part with your number and email included so we can see the full <ul> code.

Also, in your original html posting you have a p element right after your li element. You should only have list elements inside your ul

March 16, 2014 7:22pm

With the ul problem u just mentioned is only because i just copied only those two problem lines. I do see where the links are set to whit after visit but i thought that's only for the nav

March 16, 2014 7:31pm

If you want visited links in the nav to be white then you would have to do something like this:

/*nav links*/
nav a, nav a:visited {
    color: #fff;
}

Notice that I added nav in front of a:visited. With the way you had it before, all visited links would become white. Now it's only visited links within a nav.

March 16, 2014 7:36pm

Oh ok i see now

March 16, 2014 7:24pm

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ty Jarrett | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/design1.css">
</head>
<body>
    <header>
        <a href="design1.html" id="logo"> 
            <h1>Ty Jarrett</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="design1.html">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html" class="selected">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <h3>General Information</h3>
            <p> I am currently looking for new design work, If you have any questionns, please don't hesitate to contact me!</p>
            <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
        </section>
        <section>
            <h3>Contact Details</h3>
            <ul class="contact-info"></ul>
             <li class="phone"><a href="tel:484-264-3382">484-264-3382</a></li>
       <li class="mail"><a href="mailto:tjarrett.web@gmail.com">tjarrett.web@gmail.com</a></li>
       <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=timmyty33">@timmyty33</a></li>

        </section>
        <footer>
            <a href="http://twitter.com/timmyty33"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com/timmyty33"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2014 Ty Jarrett.</p>
        </footer>
    </div>
</body>
</html>

March 16, 2014 7:37pm

Your closing <ul> tag in Contact Details should come after the 3 list items.

March 16, 2014 7:41pm

oic yea fixed that to just never really got to it i finished the list items and loaded the page and seen i had an issue

March 16, 2014 7:30pm

I could be wrong :-)

March 16, 2014 7:36pm

This is from the video:

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

March 16, 2014 7:42pm

Okay cool thanks after removing the visited state altogether ill go back and make it right. Thanks alot

March 22, 2014 12:47am

A tip to finding text that is the same color as your background (rendering it invisible) is to hold down your mouse button while moving it over the area you suspect may have this issue. You will see that it will change your background color and reveal your text. Just a troubleshooting tip.

Hope that helps.

Ian

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Ty Jarrett

Ty Jarrett

My twitter name wont show up

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

12 Answers

marsha grasett

marsha grasett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

marsha grasett

marsha grasett

Jason Anello

Jason Anello

marsha grasett

marsha grasett

Ty Jarrett

Ty Jarrett

marsha grasett

marsha grasett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Jason Anello

Jason Anello

Ty Jarrett

Ty Jarrett

marsha grasett

marsha grasett

Ty Jarrett

Ty Jarrett

James Barnett

James Barnett

marsha grasett

marsha grasett

Jason Anello

Jason Anello

Jason Anello

Jason Anello

Ty Jarrett

Ty Jarrett

Jason Anello

Jason Anello

Ty Jarrett

Ty Jarrett

Ty Jarrett

Ty Jarrett

Jason Anello

Jason Anello

Ty Jarrett

Ty Jarrett

marsha grasett

marsha grasett

marsha grasett

marsha grasett

Ty Jarrett

Ty Jarrett

Ian Hudson

Ian Hudson