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

Posted by Cameron Bourke
Cameron Bourke
10,198 Points

Radio buttons breaking layout.

Hey.

I'm almost finishing working on a small project. However, I can't seem to solve this bug that occurs when you click on the badges (the three svg's at the top) for the first time it pushes down the content underneath slightly.

Then when you freely select between the svg's, the one selected will slightly move down aswell. I'm sure its a simple thing I am doing wrong, but I've been starring at the code for too long now to work it out haha.

Anyways, here the pen. Any help would be greatly appreciated!

http://codepen.io/cambourke/pen/LDwhj

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Cameron,

This is the normal behavior. Borders take up space. When you add a 4px border in the checked state the svg will move down 4px because of the extra space the top border takes up and the content below should move down 8px because of the top and bottom border combined.

One way to solve this is to give the unchecked state a 4px white or transparent border. Then when the page loads the border will already be taking up the space it's going to take up. When you check a radio input then you're simply changing the color from white to orange.

Another way would be to use the outline property instead of border https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Outlines don't take up any space.

Cameron Bourke
Cameron Bourke
10,198 Points

Awesome, thanks heaps Jason Anello! I forgot to add a "b" to border and therefore instead I had the rule order with a 4px transparent border. Just added the "b" back, and bang its working perfectly. Thats again man, brilliant spotting!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome. Sorry, I should have checked your scss. Then I would have realized you already knew all of this and had accounted for it. You only made a typo.

I had only troubleshooted in firebug so I couldn't see the invalid declaration.