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

Posted by Hobie Rice
Hobie Rice
604 Points

What happened to my img?

In my main.css file when I use the "display: block;" technique to center my img, it causes the img to appear at the right side of the header when viewed in my browser. (Firefox) When I change "block" to "center" the img lines up in the section portion of my page but inline with the text. Why is using "block" not centering my img in the section portion of my "about.html" page?

      .profile-photo {
      display: block;
      max-width: 150px;
      margin: 0 auto 30px;
      border-radius: 20%;
Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

Is this only happening in Firefox? And which version of Firefox?

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

Is this how you want it to look?

http://codepen.io/anon/pen/uFldb

Hobie Rice
Hobie Rice
604 Points

I don't know why the markdown doesn't appear to be working. I added the backticks?

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

Did you remember to type css after the first couple of backticks?

Like this, only with backticks:

´´´css

code

´´´

EDIT: And it also needs to be on separate lines!

Hobie Rice
Hobie Rice
604 Points

I did format my code with the backticks and the css but it does not look right when I select my question from the forum.

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

Aaah.. Okay, might just be a bug with markdown

3 Answers

Hobie Rice
Hobie Rice
604 Points

Thank you for your responses! I was so wrapped up in my workspace that I failed to read the instructors notes lower down on the lesson video page. He tells us there is a bug in Firefox that causes the img to appear incorrectly and he gives the code to correct it! I implemented his fix and it is now working. Thank you again!

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

No problem man, good luck :)

Hobie Rice
Hobie Rice
604 Points
Hobie Rice
Hobie Rice
604 Points

Hi, I have Firefox 28.0 I have only used Firefox to access Treehouse so I can't say if it does this in a different browser. I looked at your codepen example, I think that is about what the instructor has in mind. The img centered under the header and centered over the text below. Mine does not center. It adds a slider bar to the page and puts it far right of the header, but not on the header.

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

Could you try to make it in a workspace and see if the error still occurs?

EDIT: That doesn't make sense.. Could you try to view it in another browser? For example IE or Safari.

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points
Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

The only logical explanation I could see to this is that Firefox adds some sort of user agent stylesheet that messes with some settings, you could try to use a resetter like normalize.css.

The other explanation is that you forgot something simple, like the <!DOCTYPE html> or something like that, really easy to miss!