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 trialAlexander Perich
5,203 PointsAfter 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
3,941 PointsIf 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.
Kaisar Andreti Mustiadi
5,364 Pointswhy does it only happens in firefox?
Donald Edgar
5,524 PointsI 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.
Alexander Perich
5,203 PointsAlexander Perich
5,203 Pointsthanks 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
3,941 PointsChristian Lawrence
3,941 PointsUse 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
5,203 PointsAlexander Perich
5,203 Pointshttp://imgur.com/AudClk1
Christian Lawrence
3,941 PointsChristian Lawrence
3,941 PointsSeems 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.
Alexander Perich
5,203 PointsAlexander Perich
5,203 Pointsdidn'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!!