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

CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Daniel Kong
Daniel Kong
5,813 Points
Posted by Daniel Kong
Daniel Kong
5,813 Points

.icon-location not affected by the css rule

I'm following the step in video. But the following css rule unable to resize and positioning the location icon.

.icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }

Am I missed anything? Please help, thanks.

Daniel Kong
Daniel Kong
5,813 Points
Daniel Kong
Daniel Kong
5,813 Points

I tried to put ".icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }" in different position in style.css and I finally solved the problem. I found out that the rule above .icon-location is missing a " } ". XD

like this:

.headline { margin-bottom: 0;

.icon-location { width: 35px; position: absolute; top: -15px; left: -15px; }

Thank you for all your kind assistance.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

This is a perfect example of why it's important to share ALL the code, since the error was on a different line.

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

This CSS looks good. The problem may be in some of the other code.

It can be hard to see the issue without the complete project, particularly when images are involved. You can share everything at once if you make a snapshot of your workspace and provide the link to it.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Daniel,

When positioning elements with absolute positioning it positions them in a position relative it a "position context" which is either the root element or the parent element with a position value of "relative"; so in other words it's a position relative to it;s parent element.

Try setting the direct parent element above your element with the class of icon-location with a position property of relative.

Jelmer Rodenburg
Jelmer Rodenburg
10,149 Points
Jelmer Rodenburg
Jelmer Rodenburg
10,149 Points

My CSS has no effect on the location image what so ever. Even when I copied the finished project file and replaced the CSS I typed the location image still remains the same size. Snapshot of the CSS: https://w.trhou.se/vr0iixfwod. The stylesheet is still linked to the html file. I tested by changing the bg color.

Thanks in advance.