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
Jack Quiroga
547 Pointsdisplay:block doesn't show profile picture
When I use display: block; for the .profile-photo for the About page, it doesn't show up at all. When it is removed, the profile photo shows up again. Here's my about.html and main.css code:
ABOUT.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Damien Coppersan | Transgender Activist</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,400italic|Open+Sans:400,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>Damien Coppersan</h1>
<h2>Web Developer</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 Damien Coppersan" class="profile-photo">
<h3>About</h3>
<p> Hi, I'm Damien Coppersan! This is my web development portfolio. When I'm not coding websites, I enjoy exercising, playing video games, reading books, educate about transgender folk and more.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/damiencoppersan">@damiencoppersan</a>.</p>
</section>
<footer>
<a href="http://twitter.com/damiencoppersan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/damiencoppersan"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Damien Coppersan.</p>
</footer>
</div>
</body>
</html>
MAIN.CSS
/********************************
GENERAL
*********************************/
body {
font-family: 'Roboto', 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 0;
}
/********************************
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: 'Roboto', 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 2px;
}
/********************************
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%;
}
/********************************
PAGE: CONTACT
*********************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: inline-block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 2px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.email a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/********************************
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;
}
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
2 Answers
rydavim
18,814 PointsAny chance you're using Firefox?
Try putting "clear: both;" in your #wrapper styles. Does that fix it?
Jack Quiroga
547 PointsYeah actually, I was using Firefox and saw that it worked fine on Chrome. I added that piece and it fixed the problem on Firefox, thanks!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsGood call, rydavim! I hadn't tried it in Firefox, and I didn't notice the float going on.
Michael Renaud
738 PointsMichael Renaud
738 PointsSame problem, answer worked perfectly, @rydavim, but any chance you could explain why? Thanks for the awesome program.
rydavim
18,814 Pointsrydavim
18,814 PointsThis is my understanding of what's going on and what we're doing to fix it.
Basically the profile photo isn't disappearing, it's actually being floated offscreen, over to the right of the header.
The clear property is specifying which sides of an element floating elements are not allowed, in this case both sides. Because the header is being floated, normally other elements like the profile picture will flow around it. The clear property is basically saying, "No, you can't flow around to either the right or left side (both)."
In our case, this forces the profile picture back down below where we want it to be, since it can't flow around the floated header element anymore.
I'm going to be perfectly honest, I have no idea why this only shows up in Firefox. But I use Firefox, so I had the same problem during that website course.