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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Dave Lawlor
Dave Lawlor
2,732 Points
Posted by Dave Lawlor
Dave Lawlor
2,732 Points

Photograph appears on right hand side of header instead of in the center below the header on the about page.

Hi

Hope someone can explain what I'm doing wrong.....

According to the video, the photo should display in the center below the header - but when I add this code to the main.css file:

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

the photo is on the right hand side of the header, this happens even when I cut and paste the above code from the downloaded project file. I've included the code from the about.html page where the .profile-photo class is created below:

<section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" Class="profile-photo"> <h3>About</h3> <p>Hi I'm Nick Pettit! This is my design porfoloio where I sahre all of my favourite work. When I'm not working, I enjoy exercising, playing video games, drinking good beer and more.</p> <p>If you'd likle to follow me on Twitter my username is <a href="http://twitter.com/nickrp">@nickrp.</a></p>

  </section>
Dave Lawlor
Dave Lawlor
2,732 Points
Dave Lawlor
Dave Lawlor
2,732 Points

Hi all

The code works in IE.

I'm using Firefox, I just tried the page in IE and it works as expected, the photo is in the middle and below the header.

Can anyone tell me if I shouldn't be using Firefox - is the project code designed for IE only?

Thanks

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dave,

You should continue using firefox if you like using it but don't switch to avoid a problem that browser is having. You could be working on a live site and you can't expect your visitors to switch their browser from firefox because there's a problem.

Part of your job as a web developer will be to make sure your site works properly in all the major browsers. I think it's better to get into the habit of doing that now rather than later.

2 Answers

Alexandra Silcox
Alexandra Silcox
24,486 Points

If you check out the teacher's notes below the video, it mentions a bug in Firefox that causes the profile picture to display incorrectly. It's caused by Firefox having issues with display:block from what I can remember. To resolve this, they recommend using the clear property with the value of both. So it should look like this:

 .profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
Dave Lawlor
Dave Lawlor
2,732 Points
Dave Lawlor
Dave Lawlor
2,732 Points

Thanks Alexandra

Excellent, that explains it, I'll make sure I look out for the teacher's notes from now on.

All the best

Dave

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

It works in Chrome for me, so I'm not sure.

Dave Lawlor
Dave Lawlor
2,732 Points
Dave Lawlor
Dave Lawlor
2,732 Points

Thanks Adam - I tried it in IE and it works OK.

I'll use IE for the project.