My HTML / CSS project on JS Fiddle is encountering a few issues jsfiddle ZyBZT.
- The footer with the class "
footer" is not displaying at the bottom of the page. - The background image specified by
is not showing up.url('http://i.imgur.com/z5vCh.png') - The Sprite Images are failing to appear in the list inside the
<UL>element.
Initially, the Sprites were functioning correctly, and no changes were made to the Sprite CSS code, which is shown below:
#nav {
list-style-type:none;
margin:20 auto;
text-shadow:4px 4px 8px #696969;
white-space:nowrap;
width:600px;
}
#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;
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;
}
Sometimes, the background image loads properly, while other times it doesn't.
Lately, I have been focusing on fixing the FOOTER div, but now more elements seem to be affected by these changes.
How can I troubleshoot when one piece of CSS disrupts another? Is there a way to identify errors in executing CSS?