css hide a links text

jackjohnson44
jackjohnson44 used Ask the Experts™
on
I am trying to display an image and hide the text of a link.  I can display the image, and even get rid of the text underline, but I can't get rid of the text.

.collapsed, .collapsed a  {
    background: transparent url('/Style Library/maximize_gray_small.png') no-repeat scroll center left !important;
      padding:2px 6px 2px 25px !important;
    text-indent: -1999px;
    text-decoration:none;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
Maybe your CSS is wrong.

Try this:

.collapsed, a.collapsed  {

Open in new window


If that doesn't help, please post a live URL or your HTML/CSS rendered page so we can debug further

Commented:
The only text-indent value that I have seen for this technique is -9999px rather than the one you have which is -1999px.   For most resolutions this shouldn't matter, but...

Author

Commented:
Thanks, but neither of those worked.  I can't send a public url because there is none.  I do have a screen shot with the page, and the html code and css thanks to firebug.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

LZ1
Top Expert 2011

Commented:
Show us the URL.

Author

Commented:
It is a test site on a development box.  It isn't on the internet.
LZ1
Top Expert 2011

Commented:
Sorry, I misread.  Please post your HTML/CSS code
Jagadishwor DulalSenior Web Developer
Commented:
Try the example below
<html>
<head>
<title>TEST</title>
<style>
.collapsed, .collapsed a  {
    background: transparent url('/Style Library/maximize_gray_small.png') no-repeat scroll center left !important;
      padding:2px 6px 2px 25px !important;
    text-indent: -9999px;
    text-decoration:none;
} 
</style>
</head>
<body>
<div class="collapsed"><a href="#">Hello There</a></div>

</body>
</html>

Open in new window


if not worked Post html code
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
The only time the text-indent will work is if your element is a block level element. By default Anchors aren't so you will need to force it.

.collapsed a  { display:block; }

or

.collapsed a  { display:inline-block; }

If you do this you will probably need to add a width to your element, otherwise it will either stretch the full width of the parent element or collapse into nothing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial