Hiding Text

[kyllle]

<ul id="main_nav">
  <li><a href=""><img src="link_1.jpg">This is link 1</a></li>
</ul>

Basically link_1.jpg is a button that I want to use to replace 'This is link 1' but what css command do I give to 'This is link 1' to make it disappear from the webpage im designing?

[omol]

There are many ways of image replacement. My favorite way:

Your html with a couple of bits added / removed.

<ul id="main_nav">
<li><a href="#"  class="link1"><span>This is link 1</span></a></li>
</ul>

And the css to put in your css file or between style tags.

#main_nav .link1 { 
background-image("link_1.jpg"); 
no-repeat; 
width: 80px; // Replace with image width
height: 50px; // Replace with image height
}

#main_nav span {
display: none;
}

This is the Fahrner Image Replacement method. (FIR)

Although beware of accessibilty issues this may cause, screen readers will not pick up the text so if your designing with a potetial audiance of blind / sight impared viewers in mind do not use this method.

[MidiMagic]

It's easy, even with accessibility:

<ul id="main_nav">
  <li>
    <a href=""><img src="link_1.jpg" alt="This is link 1" /></a>
  </li>
</ul>

[omol]

Not many screen readers actually use the alt tag because the alt tag was at one point massivly missused for seo.

[MidiMagic]

That is NOT a good reason to disable a function. The W3C Requires the alt attribute for accessibility.

The only other thing I can think of is a kludge:

Make the color of the text and the background the same color.