Element inherits wrong style

Question

Hello.

I have a huge amount of elements in my website... And since I added the following css... Some elements inherit from these css styles... While they don't have anything to do with it: other scope, no direct definition to the css style etc... What am I doing wrong?

#InformationForDiv
{
    width: 205px;
    height: 180px;
    background: #FFFFFF;
    clear: both;
    float: left;
    margin: 0 35px 0 35px;
    text-align: center;
}

#InformationForDiv ul
{
    text-align: left;
    padding: 0px;
    display:block;
}

#InformationForDiv li
{
    border-bottom: solid 1px #D6D6D6;
    padding: 0px;
    list-style: none;
    line-height: 20px;
    display: block;
}

#InformationForDiv p
{
     display:inline;
     float:right;
     margin:0;
     text-align:right;
     font-size: 16px;
     color: #B02229;
}


#InformationForDiv li a:link, a:visited
{
    color: #544B42;
    text-decoration: none;
    font-size: 12px;
    width:100%;
    display:block;
}

#InformationForDiv li a:hover
{
   color: #544B42;
   border-bottom: 1px solid #544B42;
   font-size: 12px;
}

#InformationForDiv li a:visited
{
   color: #544B42;
   text-decoration: none;
   font-size: 12px;
}

#InformationForDiv img
{
    margin: 10px 0 5px 0;
}

Answer 1

Try http://doctype.com ?

See http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/

Answer 2

At least this one:

#InformationForDiv li a:link, a:visited

will select all a:visited elements and it doesn't look like your intention.

Answer 3

Perhaps because those elements have an ancestor in the HTML document in which they exist that has the ID "InformationForDiv".

Its generally not a good idea to include in an external css selectors the use of specific element IDs. External CSS ought to rely on class names to select appropriate elements.