Q:

Displaying none in   list multiple times

I couldn't think of a better way to word the title, but to the point.
I have my code set up like so:
<li> 
 <a class="news" href="http://MYLINK">
  <span>News</span>
 </a>

<ul>

 <li class="blog">
  <a href="http://MYLINK/">
   <span>Blog</span>
  </a> 
 </li>

 <li class="news">
  <a href="http://MYLINK">
   <span>News</span>
  </a>
 </li>

</ul>

</li>

And each MYLINK has a background-image attached to it.
My CSS:
a.news { display: block; width: 105px height: 28px; 
background-image: url(Icons/news.png); }

a.news span { display: none; }

And it will maintain the link and not show the text.
But when I do the same for the li classes blog and news it will not display the text,
but it will also not keep the link. Any help?
Should I be using js/jQuery to make this work properly?

A:

You should specify width and height for links too:
li { width: 105px height: 28px; background-image: url(Icons/news.png); }
li a {display: block; width: 105px height: 28px;}
li a span { display: none; }

