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 Basics (2014) Basic Layout Lists

dijanadenic
dijanadenic
2,198 Points
Posted by dijanadenic
dijanadenic
2,198 Points

List styling suddenly affects anchor elements?

This is what caused my .callout elements (<a class="callout" href="#more">Find out more</a> <a class="callout" href="#wildlife">See the Wildlife</a>)

to get an underline

li {border: 1px solid #000;}

Why is this happening? I figured out, there were anchor elements just underneath this(i put list styling between img and a: selectors). If i place the ''li'' styling elsewhere in css,the .callout returns to normal. How can I know in what order to put selectors so they don't overlap?

1 Answer

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi dijanadenic,

It would be incredible helpful (in order to help you and also for us learning in the process, together with you) if you post your code (that is both the style.css and the index.html).

To do so, please write three times the symbol (the one immediately under ESC key), then type ENTER, and in the next line, start writing (or simply paste) your code. After you finished writing or pasting, type ENTER again, and in the next line wrap it up with another three times the symbol. After doing this, click the little button with an eye at the bottom-right in this comment box you're writing in. It should show a preview, to make sure it went through alright.

Would that be possible for you? We'd love to help you but we need that.

For now, what I can tell you is that the CSS declaration that should affect the .callout items, that is if we're doing the same file alongside Guil, is the:

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid; /* this should be the one you use for "underlining" it I guess */
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

The li {border: 1px solid #000;} should give something like a box around each list element/item. Could be related to some unclosing tags, brackets or rules (it happens to me all the time! :D )