Background issue with html and css

Question

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?

• Akshay: Change #subnav.lib to #subNav.lib i didn't try it though
• df0: @Akshay - wow, well spotted. Yes that was it! I guess I've been looking at this too long. Stupid mistake but awesome pickup at your end. Appreciated and if you want to set it as an answer, I'll accept.
• Akshay: It's okay it was a small mistake i will leave it as a comment itself
• df0: @Akshay True but it was one I asked and you did correctly answer, despite it being a simple one. Credit where credit is due. You spotted the problem while I was thinking complexities about CSS item ordering etc.
• Akshay: Alright then i will answer

Answer 1

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;
}

• df0: Perfect, thanks again Akshay. Sometimes the devil really is in the detail.
• Akshay: Yeah @df0 a quick way to find such errors is to use the dev tools
• df0: Can you suggest a tool that would have spotted this problem? None I am using currently highlight this sort of simple mistake.
• Akshay: press F12 @df0 and inspect the element you are having trouble with, then check the css properties, errors will be show there or in the console