How to Make a Website- About Page Issue

From what I can tell this seems to be a firefox issue. Tried opening in safari and everything looks great. Any clue on how to resolve the problem?

<section>
        <img src="img/casey.jpg" alt="Photo of Casey" class="profile-pic">
        <h3>about</h3>
        <p>Hi, I'm Casey. This is my portfolio where I share my favorite work. When I'm not designing stuff I'm hanging out with my dog and watching crazy amounts of TV</p>
        <p>To find out more about my qualifications visit me on <a href="http://www.linkedin.com">Linkedin</a>.</p>
</section>

Yeah I put it in on my codepen and it works fine. The only thing I can think of is missing vendor prefixes

try adding -moz-border-radius above your border-radius declaration for the class profile-pic

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

Can you post your html?

For some reason the <header> is floated left, which is taking it out of the normal flow and making the <section> move all the way up to the top, messing up the profile image. Remove the float and it will fix the layout. I'm not sure why it works on Chrome and Safari but not Firefox. Could be an issue with the browser defaults.

I gave these suggestions a try but had no luck. Adding moz-border-radius: 100%; seemed to cancel out the border radius altogether. Removing the float left on the header fixed the image but created a new problem where the entire header disappears when the layout flexes to a larger size. I appreciate everyone's efforts anyway.

I checked responses on the other thread too but ultimately decided to just move over to safari. Fixing issues is an important skill but how much time am I going to spend trying to repair a hole in treehouse's lesson?

Thanks again guys!

Hey Casey I think I figured it out!

Just add clear: both; to that class and it should clear you of the float left thing. I'm still not sure why Nick has us float the header left yet because I haven't made it all the way through, but this fixed it for me ;)

Thanks Seth,

I'll try that. I was hoping that this issue was something intentional that would get cleared up in the bug fix portion of the lesson but it wasn't.

I had this issue as well except in mine the image disapeared in Firefox alltogether. When I tested it, the margin did not center. when I used the display: block; the image disapeared. Border radius and the max width property worked fined just those other two styles didn't work as expected in Firefox.

I'm using FF and IE. I added the following to the code:

display: block;
clear: both;

This corrected the issue, and all seems to be fine. However, I'm still an absolute newbie, so I cannot guarantee this as the best solution. Best of luck.