How to Troubleshoot CSS? - html

Question

I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
​
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?

Answer 1

The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.

Answer 2

Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!

Answer 3

Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.