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

Robert Marczak
Robert Marczak
12,358 Points

img and display:block

when i set display to block to img class profile-photo my image disappears from page. why is that??

7 Answers

please share some code with us :) html and css .. cheers

Robert Marczak
Robert Marczak
12,358 Points

html

                     <section>
            <img src="img/mtrobert.jpg" alt="Photo of mtrobert" class="profile-photo">
            <h3>About</h3>
            <p></p>
            <p>If you would like to follow me on twitter my username is <a href="http://twitter.com"> @Rob</a></p>
        </section>

css

.profile-photo{ display:block; max-width:150px; margin:0 auto 30px; border-radius:100%; } just following the lessons for now

Ferenc Marcsó
Ferenc Marcsó
1,835 Points

It is an Firefox specific problem. I found a solution based on the previous lessons.

about.html

<section>
  <div id="profile-picture">
    <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
  </div>
  ...

main.css

.profile-photo {
  width: 100%;
  border-radius: 100%;
}

#profile-picture {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
}

img is a block element , I am sorry I wish i could understand you a little more . however look at this codepen http://codepen.io/alithecoder/pen/Hsinf . see if this is what you wanting..

Robert Marczak
Robert Marczak
12,358 Points

thanks, I need to have a look on this one because even treehouse downloaded content(html and css) behavies same way

Hi Robert,

When I use the code you supplied everything seems to work, in Chrome. Of course I had to change the image file name. I don't suppose there is more code we can look at?

Jeff

img are inline elements so setting it display: block will completely change how it flows on the page.

Robert Marczak
Robert Marczak
12,358 Points

The thing is I do everything exactyly as it is in videos but it works diffrent way. Is it possible since video were uploaded to treehouse servers, the way how img elements behave has been changed??