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

Dan Webb
Dan Webb
744 Points
Posted by Dan Webb
Dan Webb
744 Points

Profile Picture Not Properly Displaying

Hi there,

Having an issue with the profile picture properly displaying on the about the page -- it works fine in IE but not in Firefox, and I have no clue what I'm doing wrong! Would greatly appreciate any guidance you might be able to offer.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dan Webb | Airplane Dork</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Dan Webb</h1>
        <h2>Airplane Dork</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/nick.jpg" alt="Photograph of Dan Webb (not really)" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Dan Webb. I like airplanes. That is all.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/danwebbage">@danwebbage.</a></p>
      </section>
      <footer>
        <a href="http://twitter.com/danwebbage"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/danwebb"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Dan Webb.</p>
      </footer>
    </div>
  </body>
</html>

/******************************
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%;
}

/******************************
HEADOMG
*******************************/

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

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

h1 {
  font-family: 'Open Sans', sans-serif;
  margin: 15px, 0;
  font-size 1.75em;
  font-weight: bold;
  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;
}

#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;
}

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

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

5 Answers

Alexandra Silcox
Alexandra Silcox
24,486 Points

I managed to find this that's relevant to your problem, I guess there's a bug for firefox when it comes to display:block : https://teamtreehouse.com/forum/profilephoto-declaration-does-not-work-with-display-block-img-disappears-firefox-bug-see-fix-teachers-notes

It looks like you need to clear the #wrapper. Try this:

 #wrapper {
clear: both;
}
Alexandra Silcox
Alexandra Silcox
24,486 Points
Alexandra Silcox
Alexandra Silcox
24,486 Points

Try this. You may still have to use a prefix for the border-radius property, but I'll have to check. 

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
-moz-border-radius: 100%; //For Firefox
-webkit-border-radius:100%; //For Chrome
border-radius: 100%;
}
Dan Webb
Dan Webb
744 Points
Dan Webb
Dan Webb
744 Points

Hi, Alexandra. That doesn't seem to be doing the trick, sadly.

Did some further testing -- the image stops displaying in Firefox when the display: block line is present. Do you know what could be causing this?

Thanks for your help!!

Dan Webb
Dan Webb
744 Points
Dan Webb
Dan Webb
744 Points

Can't believe that was in the teacher notes the whole time! Thanks for the help!

Alexandra Silcox
Alexandra Silcox
24,486 Points
Alexandra Silcox
Alexandra Silcox
24,486 Points

Yeah, it can be easy to overlook those :) Best of luck and happy learning.