How to hide text using CSS?

Question

How to make foo invisible using CSS (CSS3 if needed) while keeping bar and fizz visible?

<table>
  <tr>
    <td>
      <textarea>bar</textarea>
      <input type='button' title='fizz' />
      foo
    </td>
  </tr>
</tbody>

Making foo in the same color as background is acceptable, but the trick is - background is an image, hence - foo must be transparent instead of solid color.

JavaScript isn't an option either.

Changing HTML is not an option either.

Any ideas?

Answer 1

This worked fine in IE8 and Firefox (IE7 left little dots for words, which I guess if you set the font-color to something that blends with the background image, it might do fine. Note that this does not affect either the text-area or the input for any text in them.

td {font-size: 0;}

ADDED ON EDIT

WOW I mean, really! This worked on IE7-8, Firefox, and Safari

td {visibility: hidden}
td textarea,
td input {visibility: visible;}

As a side note, I tested this with elements wrapped in div rather than a table, I even did a div in a div and the inner div shows while other content is hidden.

Apparently, the visibility property acts on the element, and (unlike opacity) propagates to the child elements by inheritance, so that if one explicitly sets a child element visibility it no longer inherits the hidden but uses its own setting of visible and the fact that the wrapper is hidden does not matter.

Answer 2

EDIT: Scott's is better. Use his.

I don't think a proper solution is going to be pretty.

td {
    position: relative;
    left: 9001px;
}

textarea {
    position: relative;
    right: 9001px;
}