CSS - Float Left and Anchor Element

Question

Hello,

I have an anchor element that uses a css class to basically replace the text with an image. I know this sounds odd. But, the end result looks correct (for the most part).

.toolLink a {   
    overflow:hidden; 
}
.toolEdit 
{
    float:left;
    background:url(/resources/images/edit.png) no-repeat;
    width: 15px;
    height: 15px;
}

My anchor element looks like this:

<a href="#" class="toolEdit">edit</a>

When the "float:left" statement is included, everything looks correct. However, when I remove the "float:left" statement, the word "edit" appears and the image is shrunk. I need to remove float:left because I need to center the content in the column of a table. But as long as float:left is there, the content aligns to the left. What should I do?

Answer 1

Anchors are inline elements. Try adding display:block to your .toolEdit class.

You might also consider a div instead of the anchor since the anchor doesn't go anywhere nor have a name or any other anchor purposes.

edit:

Either way the "Edit" should show unless you're using some javascript to remove it. In which case, I would advise swapping the "Edit" text with an image instead of using a background image.

Answer 2

This should work...

Your CSS

.toolEdit 
{
    display:block;
    background:url(/resources/images/edit.png) no-repeat;
    width: 15px;
    height: 15px;
    text-decoration:none;
}

.toolEdit span 
{
  visibility:hidden;
}

You can remove the overflow:hidden style too... not necessary...

Your HTML

<a href="#" class="toolEdit"><span>edit</span></a>