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

CSS How to Make a Website Adding Pages to a Website Add Iconography

I can no longer preview my contact page after editing main.css?

I was working in my main.css file and now I can't preview my "Contact" page, the other pages work fine though.

When I click Contact it just takes me to a blank page. I've had a look but I can't see where/how I've gone wrong.

Hope someone can help, thanks!

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

  .contact-mail li.mail a {
  background-image: url('../img/mail.png');
}

    .contact-twitter li.twitter a }
  background-image: url('../img/twitter.png');

}

index.html

<!DOCTYPE html>
<html> 
    <head>
      <meta charset="utf-8">
      <title>Kevin Wharton | Unicyclist</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/main.css">
    </head>
    <body>
      <header>
        <a href="index.html" id="logo">
          <h1>Kevin Wharton</h1>
          <h2>Unicyclist</h2>
         </a>
        <nav>
          <ul>
          <li><a href="index.html" class="selected">Portfilio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>

contact.html

<!DOCTYPE html>
<html> 
    <head>
      <meta charset="utf-8">
      <title>Kevin Wharton | Unicyclist</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/main.css">
    </head>
    <body>
      <header>
        <a href="index.html" id="logo">
          <h1>Kevin Wharton</h1>
          <h2>Unicyclist</h2>
         </a>
        <nav>
          <ul>
          <li><a href="index.html">Portfilio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
          </ul>
        </nav>
Sreng Hong
Sreng Hong
15,083 Points

Hi Kevin, you have to post your codes in order for people to help. Use Markdown Cheatsheet.

Thanks Sreng! I'll just add the section of code I've been working on I guess?

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Kevin,

Please post your html here too. Need to have a look at your links

Hopefully I haven't added too much.

7 Answers

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points

This code is wrong in your css:

    .contact-twitter li.twitter a }
  background-image: url('../img/twitter.png');

}

It should be something like this:

.contact-twitter li.twitter a {
  background-image: url('../img/twitter.png');
}

This might not be the reason, but it's still an error in your css

Ah thanks for pointing that out!

Kevin Korte
Kevin Korte
28,149 Points

Use your browsers Dev Tools to pull up the live source code, and see if you can find what is going on. That should get you a long ways.

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points

Just to check. You have saved the file as contact.html and in the root directory and not in a sub-folder right?

It seems like it maybe be because you are linking to contact.html but contact.html is not saved in that name.

Hi John, the name and location of the contact.html file is correct and it was all working smoothly before I started adding the contact styling in CSS.

I tried deleting what I added and reloaded but still no luck. Also when I click the contact page it takes me to the blank page and instead of my title above the address bar it has "web-v1dmlkninc.treehouse-app.com/contact.html"

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

that link web-v1dmlkninc.treehouse-app.com/contact.html shows your contact page on my browser.

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

I just did the same thing, and it shows your contact page on mine too...

Hmm, also works for me in Safari but not in the workspace preview? Any ideas on why this would be?

I'll resort to reloading the page outside of Workspace so I can continue with the lessons at least. I appreciate everyones time and help!

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points

I just tested the code on my personal machine, not on the Treehouse Workspaces and it worked fine.

I will test it in a Workspace now

Thanks for testing John, so do you think it would be something deeper in my main.css? As that's what I was working in before it stopped working.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Kevin,

You may want to try something as simple as logging out and then back into Treehouse to see if that fixes the issue.

Hi Wayne,

I haven't logged out but my computer was off for a few hours, it's been working fine once I started it back up :)

Thanks for everyones help!

Cheers, Kevin