Text-indent: -9999px; Question

[raydar]

Hello,

I'm trying to code a menu item where it shows a background image. I was told that it's best to have text in your list, and then do a text-indent in the .css file to shift the text all the way off the page. (Instead of doing a list of images.) The problem I have is that when I do the text-indent, the whole box (text + background image) disappear.

Here's the html code:
<div id="menu">
<ul>
<li id="menu_space1"></li>
<li id="menu_about"><a href="about.html">About</a></li>
<li id="menu_space2"></li>
<li id="menu_services"><a href="services.html">Services</a></li>
<li id="menu_space3"></li>
<li id="menu_portfolio"><a href="/portfolio">Portfolio</a></li>
<li id="menu_space4"></li>
<li id="menu_contact"><a href="contact.html">Contact</a></li>
</ul>
</div><!--end menu-->

Here's a sample of the .css trying to shift the word 'About' off the screen, showing only the background image:
#menu_about {
display: block;
width: 65px;
height: 54px;
background-image: url(web_images/about.jpg); <!--this is the background picture-->
background-repeat: no-repeat;
background-position: 0 0;
text-indent: -9999px;
}

Any insight as to why this is happening and how to fix it would be appreciated.

Thank you,
Raydar

 

[xrvel]

If you want to make a menu from <ul> or <ol>,
You should remove list image with

ul {
   list-style:none;
   margin:0;
   padding:0;
}

And add the background style in your <a>

ul a {
   backgroung-attachment:scroll;
   background-image:url(...gif);
   background-repeat:repeat;
   display:block;
}

If you want to move the menu left or right, modify the padding in <li>

ul li {
   margin:0;
   padding-left:1em;
}

 

[raydar]

Got it! Thank you very much.

 

[xrvel]

Remove the text :
(delete your text-indent style first)

#menu_about a {
	margin-top:9999px;
}

or

#menu_about a {
	visibility:hidden;
}