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

Will Haggard
Will Haggard
6,938 Points
Posted by Will Haggard
Will Haggard
6,938 Points

No profile-photo display when using .profile-photo selector in main.css

I am currently on the Front End Web Dev track in the styling of the profile photo and my photo appears before I use the .profile-photo slector, but after I place that in my CSS file it doesn't show at all when it is supposed to show my photo with a border-radius of 100%. I checked my css and html on about.html and cannot figure it out. Any help?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Will,

Can you please post the code from about.html and main.css?

6 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's really strange, I see the same thing. Firefox doesn't show the image but Chrome does.

I've isolated the cause as being the header is floated left. This removes it from the normal document flow.

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

Removing float: left will show the image as normal in both browsers, but we need to keep this style, because later in the course when Nick adds media queries and styles for desktop screen widths, this style will be important.

A fix that you can apply right now that won't have any negative side effects is the following:

#wrapper::before {
  content: "";
  display: table;
  clear: both;
}

Nick will talk about this later, calling it a 'clearfix' which allows elements to clear floats. So that just makes it all the more confusing as to why the original code works in Chrome. That's a head-scratcher, but at least now you'll be able to continue using Firefox if you like with this clearfix added.

Hope this helps,

Cheers

Will Haggard
Will Haggard
6,938 Points
Will Haggard
Will Haggard
6,938 Points 
<section>
        <img src="img/will.jpg" alt="Photgraph of Will Haggard" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Will Haggard.</p>
        <p>If you'd like to follow me on twitter, my name is </p>
      </section>

/* and */

.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
}
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

The code you posted is working fine for me, so the problem may be somewhere else. Can you please post the entire files of about.html and main.css?

Remove your personal information, like contact information, before posting.

Will Haggard
Will Haggard
6,938 Points
Will Haggard
Will Haggard
6,938 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Will Haggard | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|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>Will Haggard</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/will.jpg" alt="Photgraph of Will Haggard" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Will Haggard.</p> <p>If you'd like to follow me on twitter, my name is <a href=>@</a>.</p> </section> <footer> <a href=><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href=><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Will Haggard.</p> </footer> </div> </body> </html>

Will Haggard
Will Haggard
6,938 Points
Will Haggard
Will Haggard
6,938 Points 
/*****************
GENERAL
*****************/



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

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

a {
    text-decoration: none;
}
/* keeps images within containers and fill their parent elements */
img {
    max-width: 100%;
}

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

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


#logo {
    text-align: center;
    margin: 0;
}
/* em = relative unit of measurement works better with CSS than the more explicit px unit; 1 em is regular font size */
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 PORTFOLIO
*****************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* float allows side by side gallery images and width allows two images to be side by side regardless of format leaving 10% around
2.5% margin fills the 10% of space multiplied by 4*/
#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%;
}




/*****************
COLOR
*****************/

/* site body //// nav a is selected and when hovering mouse it changes color of the a */
body {
    background-color: #fff;
    color: #999;
}
/* green header */
header {
    background: #6ab47b; // green
    border-color: #599a68;
}
/* nav background on mobile */
nav {
    background: #599a68;
}
/* logo text */
h1, h2 {
    color: #fff; // fff - white
}
/* links */
a {
    color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
    color: #fff;
}
/* class in this line affects look of visited link apperance */
nav a.selected, nav a:hover {
    color: #32673f;
}
Will Haggard
Will Haggard
6,938 Points
Will Haggard
Will Haggard
6,938 Points

SO I just tried it in Chrome and it worked. Is there a reason it wouldn't show up in the latest version of Firefox?

Will Haggard
Will Haggard
6,938 Points
Will Haggard
Will Haggard
6,938 Points

Okay, I'll continue on and save that. Thank you for the help.