CSS Image Sprite Navigation - Cannot seem the damn text!!!!

slimboyfatz32 · November 20th, 2008, 08:33 AM

Hi all,
I usually dont get stumped to easily, but this one has got me!!
I have a CSS Image Sprite navigation on my page, and of course for usability, and for users with images turned off, i still want the navigation text to be shown...but im damned if i can get it to work!!
here is my XHTML .......

Code:

<ul id="nav">
  <li id="navHome"><a href="http://localhost/ashleymcdow/home" class="active" accesskey="H" tabindex="1" title="Ashley McDow homepage [Access Key H]">Home</a></li>
        <li id="navPortfolio"><a href="http://localhost/ashleymcdow/my-portfolio" class="active" accesskey="P" tabindex="2" title="View my Portfolio [Access Key P]">My Portfolio</a></li>
  <li id="navBlog"><a href="http://localhost/ashleymcdow/my-blog" class="active" accesskey="B" tabindex="3" title="Read my Blog [Access Key B]">My Blog</a></li>
  <li id="navContact"><a href="http://localhost/ashleymcdow/contact-me" class="active" accesskey="C" tabindex="4" title="Contact me [Access Key C]">Contact Me</a></li>
 </ul>

this code is sat inside my header (or on top, whichever you like)
ie;
<div id="header">
<ul id="nav"></ul>
</div>
my CSS is as follows :

Code:

 
#nav {
 width: 350px;
 float: right;
 
 margin-right: 23px;
 
 margin-top: 205px;
 
 padding: 0;
 
 height: 44px;
 
 list-style-type: none;
 
 }

#nav li {
 float: right;
 
 margin: 0; 
 
 padding: 0;
    
 list-style-type: none;
 
 }

#nav a {
 
 float: right;
 
 padding: 44px 0 0 0;
 
 overflow: hidden;
 
 border: none;
 
 height: 0px !important; 
 
 height /**/:44px; /* for IE5/Win only */
 
 } 
 
#navHome a {
 
 width: 269px;
 
 background: url(assets/images/home_button_states.png) top left no-repeat;
 
 }
 
.home #navHome a.active {
 
 background-position: 0 -88px;
 
 }
 
.home #navPortfolio a:hover, #navBlog a:hover, #navContact a:hover, #navHome a:hover {
 
 background-position: 0 -44px;
 
 }
 
 
#navPortfolio a {
 
 width: 269px;
 
 background: url(assets/images/portfolio_button_states.png) top left no-repeat;
 
 }
 
.my-portfolio #navPortfolio a.active {
 
 background-position: 0 -88px;
 
 }
 
.my-portfolio #navHome a:hover, #navBlog a:hover, #navContact a:hover {
 
 background-position: 0 -44px;
 
 } 
 
 
#navBlog a {
 
 width: 269px;
 
 background: url(assets/images/blog_button_states.png) top left no-repeat;
 
 }
 
#blog #navBlog a.active {
 
 background-position: 0 -88px;
 
 }
 
#blog #navHome a:hover, #navPortfolio a:hover, #navContact a:hover {
 
 background-position: 0 -44px;
 
 } 
 
 
#navContact a {
 
 width: 269px;
 
 background: url(assets/images/contact_button_states.png) top left no-repeat;
 
 }
 
.contact-me #navContact a.active {
 
 background-position: 0 -88px;
 
 }
 
.contact-me #navHome a:hover, #navPortfolio a:hover, #navBlog a:hover {
 
 background-position: 0 -44px;
 
 }

the various classes you see are so a specific class is assigned to each page (to keep wordpress happy, and to make sure my pages stay on an 'active' state when required)

many thanks