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

Posted by Tyler Becker
.a{fill-rule:evenodd;}techdegree
Tyler Becker
Front End Web Development Techdegree Student 431 Points

Blue Code LInes

I've run into a problem in workspaces where some lines of code will randomly be written in blue instead of orange. These lines of code are then not read and the changes they are intended to make do not show up in the preview. I've tried switching everything on and off and also just writing on different lines but this hasn't helped. This problem has only occured in my CSS. I have pointed out some example lines in my code below; Under gallery li

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

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

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

a {
text-decoration: none;
}

img {
max-width: 100%;
}

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

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

h1 {
font-family:'Bungee Hairline', 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;
}



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

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


/***************
PAGE: PORTFOLIO
***************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%
  background-color: #f5f5f5     *****Background-color and********
  color: #bdc3c7                        *****Color are in blue with orange ":"*******

}

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

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

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

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

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

/* links */
a {
  color: #6ab47b;
}

/* logo text */
h1, h2 {
color: #fff;
}

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

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

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

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Tyler,

I couldn't read your code in it's plain form so I added some markdown code to your CSS. Checkout the Markdown Cheatsheet for the Community Forum to see how I did it :)

But what happened a simple matter of a missing semi-colon in the styles that you added. Fix that and the syntax highlighting should show up properly :)

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

}

Good luck :)

Tyler Becker
.a{fill-rule:evenodd;}techdegree
Tyler Becker
Front End Web Development Techdegree Student 431 Points

Oh wow thank you so much Jonathan! Funny how you miss the small detail. I spent hours trying to figure that out, so thank you very much for your help!