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
Jake Nisenboim
3,374 PointsPlease 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 !
Curtis Murley
2,766 PointsYour .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?
Jake Nisenboim
3,374 PointsHi 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
Jake Nisenboim
3,374 PointsSo, 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
258 PointsFollow 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
1,566 PointsI'm having the exact same problem the image won't display with a border despite having correct code.
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
14,268 PointsAdd 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
1,566 Pointsnothings broken! I just tried it out, the image indeed disappears with display:none;
Brandon Schindler
1,566 PointsI just tested the same code in chrome without clear:both; and it works. It must be a Firefox issue.
Thanks!
Jeff Lemay
14,268 PointsThat'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
1,566 PointsIt 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>© Copyright 2015 Some company name.</p>
</footer>
</div>
</body>
</html>
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
1,566 PointsThose 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
14,268 PointsWell, 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
1,566 Pointsdid 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
14,268 PointsJust 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
1,566 PointsThanks 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
14,268 PointsIf 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
1,566 PointsJeff, 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
14,268 PointsI 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
1,566 PointsOK, 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
14,268 PointsQuick 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.
Jake Nisenboim
3,374 PointsI 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 !
Jake Nisenboim
3,374 PointsI've double checked the syntax multiple times though and proceeded with the quiz and got everything correct.
Jeff Lemay
14,268 PointsI'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.
Jake Nisenboim
3,374 PointsSo 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?
Jake Nisenboim
3,374 PointsDo 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
14,268 PointsIf 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.
Jake Nisenboim
3,374 PointsAwesome 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.
Jake Nisenboim
3,374 PointsJake Nisenboim
3,374 PointsAdditionally, I took the code challenge, and passed it with no mistakes.
I am not sure what is going on..