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 How to Make a Website Adding Pages to a Website Style New Pages

Posted by Alexander Perich
Alexander Perich
5,203 Points

After applying display: block to .profile-photo the photo moves in first row (only in Firefox, but not in Chrome)

Here's my CSS of the /ABOUT PAGE/

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

Here's the HTML:

<div id="wrapper">
  <section>
    <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
    <h3>About</h3>
    <p>Hi, it's me, Mario, ... it's me, Mario.</p>
    <p>Hi, it's me, Mario, ... it's me, <a href="http://supermario.com/">@Mario</a>.</p>
  </section>

After applying display: block to .profile-photo the photo moves in first row besides the header, when i set it to display: inline it appears below like it should, but of course it is not centering properly. This happens only in Firefox, but not in Chrome.

Can yomeone please help me?! Thanx in advance!

3 Answers

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

If you set the class to display block it will take up the whole row. If you set it to inline or inline-block it will display inline with any other siblings (h3 and p) which also have the same display property set, providing there is enough space in the parent container (section).

Shouldn't be a browser issue for this task, please provide a screenshot if this doesn't help.

Alexander Perich
Alexander Perich
5,203 Points

thanks for your answer, i can understand that, but i still can't figure out about my issue. actually i don't know how to include a screenshot here..

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

Use http://imgur.com/

Also when you use inline the browser adds a little space between elements. So two 50% objects might not fit in...it's weird, try lowering the width of one

Alexander Perich
Alexander Perich
5,203 Points

http://imgur.com/AudClk1

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

Seems like a tag might not be closed. Also on the image try

.profile-photo { clear: both; position: relative; width: 123px; margin: auto; }

You may have to put the image in a container DIV and apply that css, as image have an issue with center alignment.

<div class="profile-photo">
<img src="">
</div>

.profile-photo {
clear: both;
position: relative;
width: 123px;
margin: auto;
}

.profile-photo img {
 width: 100%;
}
Alexander Perich
Alexander Perich
5,203 Points

didn't found any unclosed tag (it would work well if there's still a tag open, right?).

works good with the suggested CSS added, now it's the same in FF and Chrome. thanks! seems to be even no need for the extra div.

still don't know why the code explained in the video works well for Chrome but doesn't work for Firefox.

anyway, thanks a lot!!

Donald Edgar
Donald Edgar
5,524 Points
Donald Edgar
Donald Edgar
5,524 Points

I just encountered the same thing. Following along with the examples just fine, and my photo ends up in the top left corner of the screen next to the navigation section. Thought I had done something wrong, and isolated the display: block; line as the culprit.

Came here, found your post and on a whim tried it in Chrome. Works perfectly fine in Chrome, but not in Firefox, which is strange. Glad to see it's not just me.