CSS: Problems with selecting html elements from CSS

Question

Hi!

I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:

#maincontent #left_side #comments{
    margin: 100px;
}

or

#comments{
    margin: 100px;
}

I see no visible effect.

Sorry, I think I am not very descriptive, but not sure how to describe the problem... Maybe you could take a look at the demo url here:

http://chess-advices.com:8000/article/ololo/ And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)

Thanks in advance

Answer 1

You forgot to close this:

div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;

change this to:

div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;

}

To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...

But i think, if you add something like this:

form label { width: 100px; display: block; float: left; }

form p { padding: 5px 0px 0px 0px; }

your form would look nicer :)

I hope this is the answer of your question...

Answer 2

There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.

Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.