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

Please help me find my mistake - border-radius not working

In about.html I have

<img src=

"img/Logo7.png" alt=

"Another Logo" class="profile-photo">

I put some space when otherwise there would be none at all because the line of code was not displaying in my question.

In main.css I wrote

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

I can see the photo, but it remains unaffected by border-radius: 100%;

I have tried re-writing the code, closing treehouse a few times but no luck.

Any suggestions?

Thanks in advanced !

Additionally, I took the code challenge, and passed it with no mistakes.

I am not sure what is going on..

Curtis Murley
Curtis Murley
2,766 Points

Your .css is correct from what I can tell. Not to sound too obvious, but did you link your main.css to the top of your about.html page?

Hi Curtis,

I did link main.css in about.html. I copied it from index.html when starting about.html as suggested in the lesson.

It does seem like the issue is between linking the two files though. When I changed display: none; the image remains as well.

Thanks !

12 Answers

So, it worked momentarily, after playing around changing the image, calling it about-photo instead, etc.

I then decided to change it back to profile-photo and to the image I wanted originally, and the border-radius is not working again.

A few minutes later, it works.

It looks like the issue is workspaces being incredibly slow to update the port.

Any thoughts or anyone have similar issues in the past?

Is there anything I can to do make this update time faster?

Shailesh Koirala
Shailesh Koirala
258 Points

Follow this code on workspaces: In main.css just write the below code: .element-that-holds-pictures { perspective: 1px; /* any non-zero value will work */ } And then write rest of the code: .profile-photo { display: block; max-width: 150px; margin: 0 auto 20px; border-radius: 100%; }

Brandon Schindler
Brandon Schindler
1,566 Points

I'm having the exact same problem the image won't display with a border despite having correct code.

Brandon Schindler
Brandon Schindler
1,566 Points

.profile-photo { clear:both; /* add clear:both; this worked on Firefox */ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

I was having a great time with these educational videos, until now. I went over all my code, spent some 45 mins on this... I tried to validate the CSS code the instructor is giving us and it isn't valid.

Jeff Lemay
Jeff Lemay
14,268 Points

Add display:none; where you are trying to set the border-radius. If the image is still on your page, you have a broken connection between your html and css.

If the image did go away, post your css here and I'll take a look.

Brandon Schindler
Brandon Schindler
1,566 Points

nothings broken! I just tried it out, the image indeed disappears with display:none;

Brandon Schindler
Brandon Schindler
1,566 Points

I just tested the same code in chrome without clear:both; and it works. It must be a Firefox issue.

Thanks!

Jeff Lemay
Jeff Lemay
14,268 Points

That's odd. Firefox shouldn't have any issues rendering a border radius.

Glad it's all set for you though. Enjoy the journey.

Brandon Schindler
Brandon Schindler
1,566 Points

It most certainly does. here is all my code go to town!

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
     <title>This is kinda cool | KINDA cool</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"> <!--the last linked CSS file will take over all other styles if those styles exsist in said css file -->

</head>

<body>
    <header>
        <a href ="index.html" id="logo">
         <h1>Brandon S</h1>
          <h2>Feeling better about the treehouse website and editor</h2>
     </a>
  <nav>
   <ul>
     <li><a href="index.html">Portfolio</a></li> <!--a class is like a ID but you can have the same class multiple times however the ID is unique and can only be used once per page. we could have used an ID but adding a class will give greater flexibility-->    
     <li><a href ="about.html" class="selected">About</a></li>
     <li><a href ="contact.html">Contact</a></li>
  </ul>    

</nav>
</header>
    <div id="wrapper">

  <section>
   <img src="img/nick.jpg" alt="Photo of nick" class="profile-photo"><!--class="profile-photo"-->
    <h3>About</h3>
    <p>Hi, this is a picture of nick.</p>
    <p>If you'd like to follow nick on twitter, his username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p>
</section>
    <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; Copyright 2015 Some company name.</p>

</footer>
</div>
</body>
</html>
Brandon Schindler
Brandon Schindler
1,566 Points
/*display, block level elements take up space on the page and appear to push other things out of the way like sections, div etc.. inline mostly for text*/

body {
font-family:'Open Sans', sans-serif;
}

#wrapper {
 max-width: 940px;  /*no longer than 940px wide-across*/
 margin: 0 auto;   /* first value 0 affects top and bottom -its also the spacing around elements -the second value auto, fills in space from left to right of margin.*/
 padding: 0 5%;/* first value "0" top bottom padding- the second left and right - 5% of the total wrapper element.*/
}

a {
 text-decoration: none;   /*values with words not numbers are known as keywords */
}

img {
 max-width: 100%; /* image will fill width of parent container*/
}

h3{
margin:0 0 1em 0;
}

header {
  float:left;
  margin: 0px 0px 30px 0px; /*top - right - bottom - left clockwise*/
  padding: 5 0 0 0; /*top - right - bottom - left*/
  width:100%;
}

#logo {
 text-align: center;
 margin: 0; /* the margin property can take keyword values and or numeric vbalues */
}

h1 {
font-family: 'Changa One' , sans-serif; /*changa is the font we want to use - sans is the fall back font incase someone doesn't have Changa etc*/

    margin: 15px 0; /* margin spacing of element top and bottom*/
    font-size: 1.75em; /*em is a relative unit of measurement  they get their name from a capital letter M, 1 em is basically 16px they are better suited for CSS because they adapt to users screen*/
    font-weight: normal; /* takes the bold out of h1*/
    line-height: 0.8em; /*determines amount of space between each line of text - vertically? */
}

h2 {
font-size: 0.75em;
margin: -5px 0 0;/*first value is -top, second -left right, third -bottom*/
font-weight: normal; /*unbold h2*/
}

nav{
  text-align:center;
  padding:10px 0;
  margin: 20px 0 0;
}

nav ul{
  list-style:none;
  margin:0 10px; /*zero top and bottom - 10px left and right*/
  padding:0;
}

nav li {
  display:inline-block;
}

nav a {
  font-weight:800;
  padding:15px 10px;

}


footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
  clear:both;
}

.social-icon{
  width:20px;
  height:20px;
  margin:0 5px;
}

#gallery {
margin: 0;
padding: 0;
list-style: none; 
}

#gallery li {
float:left; /**/
width:45%;  
margin:2.5%;
background-color:#f5f5f5;
color:#bdc3c7;
  }

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size:0.75em;
  color: #bdc3c7;
}

.profile-photo {
  clear:both;  /* Firefox fix - error in video had to add this*/
  display: block; 
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%; /* allows you to add rounded corners to an element the value is how round the border is */

}

/* sites body */
body {
background-color:#fff;
color:#999;    
}

/* green header */
header {
background-color: #6ab47b;
border-bottom-color: #599a68;
}

/* nav bg */
nav {
background:#599a68;
}

h1, h2 {  /* the comma between two selectors will break them into two separate selectors you can also have a descendant selector like h1 a, h2*/
color:#fff; /*short hand RGB values white*/
}

a {
color: #6ab47b;
}

nav a, nav a:visited { /* a:visited is a sudo class*/
color:#fff;
}

/*Selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
Brandon Schindler
Brandon Schindler
1,566 Points

Those code tags UHG.. IF you find anything wrong with my code or you can confirm this is a firefox issue please let me know. Thanks!

Jeff Lemay
Jeff Lemay
14,268 Points

Well, this thread is a gd mess with all the answers comments lol

But anyways... no issue with your code in firefox for me. Profile-picture had full border radius.

Brandon Schindler
Brandon Schindler
1,566 Points

did you remove

clear:both; /* Firefox fix - error in video had to add this*/

when using it in Firefox? Sorry I forgot to remove the FF fix.

Jeff Lemay
Jeff Lemay
14,268 Points

Just did and I see your issue.

The image had a border-radius, it just wasn't showing because it was behind the header. Since you have float:left on the header element, that element is "taken out of normal flow" and the rest of your content (#wrapper) is going to the top of the page.

Simplest fix would be to remove the float:left from the header element. You'll notice that the header loses a bit of padding above "Brandon S", you can fix that by adding padding-top:20px (or pixel value is a guess).

Hope this helps and makes sense. I'll keep this thread open right now if you have any other quick questions.

EDIT: "padding-top" was spelled wrong and you only need to set the value to 1px to prevent the element from collapsing on itself.

Brandon Schindler
Brandon Schindler
1,566 Points

Thanks for pointing out the errors in my css file I'll check them out.

I went ahead and downloaded the project files from teamtreehouse.com HowToMakeAWebsite-Stage7-Video4.zip and I'm getting the same exact behavior when opening the about.html page. The picture just doesn't appear * in Firefox. Neither my code or the code provided by teamtreehouse.com wants to display the bordered image in firefox. The only way I could fix this code was to add clear:both; .

Yes please keep this open. Thank you!

Jeff Lemay
Jeff Lemay
14,268 Points

If you want to leave the header styling as is, you can move the clear:both property from the profile-pic to the whole #wrapper element. You'd never (on this site) want your page body to be covered by the header anyways.

Brandon Schindler
Brandon Schindler
1,566 Points

Jeff, the project files included for this lesson do not work properly in FireFox. Can you guys check those files out to confirm and fix them? Thanks!

Jeff Lemay
Jeff Lemay
14,268 Points

I wouldn't get hung up on this. You know a couple different solutions and what is causing the issue, just pick a fix continue on with the project. This won't be the first time you come across a strange quirk with your code.

Brandon Schindler
Brandon Schindler
1,566 Points

OK, I just compared my css file to the downloaded projects css file in HowToMakeAWebsite-Stage7-Video4.zip. The only difference aside from my large comments is my code has clear:both; within .profile-photo .

I also compared the html files they are identical... I'm getting VERY confused, I can't find any spelling error in my css file.

You say that "The image had a border-radius, it just wasn't showing because it was behind the header. Since you have float:left on the header element, that element is "taken out of normal flow" and the rest of your content (#wrapper) is going to the top of the page."

But this is how the project files are Jeff!!! Was the lesson taught incorrectly? I can move on, I just hope other users find a solution. I worked on this problem for a long time only to find out somethings still wrong.

Jeff Lemay
Jeff Lemay
14,268 Points

Quick demo with your code worked for me:

<style>
    .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
</style>
<img src="http://placehold.it/350x150" alt="Another Logo" class="profile-photo">

Are any of your styles affecting the img, like max-width and bottom margin? Try changing display:block to display:none and the image should disappear. If it doesn't, the link to your stylesheet is messed up.

EDIT: another potential issue would be a syntax issue (incorrect code) in your stylesheet. This could cause all code that follows the incorrect code to fail.

I changed display: none; and sure enough it did not disappear. I've tried it with different images as well.

Additionally, when I change the image, I sometimes need to restart workspaces in order for it to load properly, which I am unsure as to why.

I have not added any styling beyond the css I sent.

Thanks !

I've double checked the syntax multiple times though and proceeded with the quiz and got everything correct.

Jeff Lemay
Jeff Lemay
14,268 Points

I've never worked inside Workspaces, always just used a text editor so I'm not sure if that would cause anything. If you want to post your whole HTML file, I or someone else can take a look and see if there are any noticeable issues.

So after changing the image, changing it back, changing the class, closing workspaces multiple times, etc. the changes finally occurred. I think the issue is actually workspaces is extremely slow..

If I used Atom by GitHub, I just save the entire document and open it in .html?

Do you have any place I can look to get started by using a text editor instead?

Workspaces is rendering itself to be somewhat dysfunctional...

The issue, I am finding is that workspaces is extremely delayed.

Jeff Lemay
Jeff Lemay
14,268 Points

If you are just using HTML/CSS (no php or other serverside language), you only need to download a text editor (Atom, Sublime Text, even Notepad would work). Then you can copy the whole Workspace into any directory you want, lets call it ProjectA for demo purposes.

  • Your ProjectA folder can be placed anywhere on your computer; My Documents, Desktop, etc.
  • Inside ProjectA, you'll add all the files from your Workspace; index.html and other html files, css folder and its files, img folder and its files, etc. Keep the same structure so all your links work the same.
  • Then open your html/css files in Atom or whatever text editor and use them as normal. When you save a file, you can refresh your browser and see the changes immediately.
  • Any web browser can read HTML files directly from your computer. Just drag the html file into the browser window and it should open automatically.

Awesome thanks a ton Jeff!

It all works except for some reason all of the pictures are coming up as broken now and not showing. Any thoughts?

Otherwise, thank you again. Itll be nice to no longer have to worry about workspaces.