CODEWITHSUNDEEP
htmlcss
df0
df0

Reputation: 29

Background issue with html and css

I have this as html:

   <div id="subNav" class="lib"><a href="./?c=library&amp;page=1">A Page</a> &nbsp;|&nbsp;
    <a href="./?c=library&amp;page=2">Another Page</a> &nbsp;|&nbsp;
    <a href="./?c=library&amp;page=3">Third Item</a>
   </div>

And this as the CSS associated with it:

/*** SubNav styles ***/

#subNav {
    position: relative;
    top: -38px;
    right: -356px;
    /* background: #f39327; */
    width: 380px;
    height: 22px;
    font-size: 18px;
    color: #ffffff;
    font-weight: normal;
    text-align: right;
    vertical-align: middle;
    display: table;
    display: table-cell;
    line-height: 22px;
    /* border: 2px solid #f39327; */
    border-radius: 0 0 0 9px;
    padding-right: 60px;
}

#subNav a:link, #subNav a:visited {
    color: #ffffff;
    text-decoration: none;
}

#subnav.lib {
    background: #f39327;
}

#subNav.lib a:hover, #subNav.lib a:active {
    color: #efefef;
    text-decoration: none;
}

If I have the subNav background colour set in the #subNav it works fine. But when I try to set it instead in the .lib part, it doesn't. I don't want to have it set to one specific colour always, as I want the subNav feature to change colour depending on the class, as other parts of the site have other colour themes. Why is it not working in the class setting, and what do I need to do to simply make it work this way?

Upvotes: 0

Views: 56

Answers (1)

Akshay
Akshay

Reputation: 14378

CSS is case sensitive.

CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects, except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.

You have to change #subnav.lib to #subNav.lib so your final code looks like this 

#subNav.lib {
    background: #f39327;
}

Upvotes: 2

Related Questions