Question

I have this small piece here – the text has text-indent So it will not be seen and then only thing that should be seen is the span with the image (size 24*27).
Firefox sees the <a> in the size of 24*27 (as I wanted)
but chrome calculates it to 58*24 (much wider).
Getting the text itself out solves the problem (but I want to leave the text there).

When I add to the text the display:none property then it works good but I wish not to do that.

What is the mistake? Why does it calculate it differently and how do I solve it?

I have this piece of HTML:

<li class="hideText"> 
   <a id="create" href="#">
       <span class="img"></span>
       <span class="text">Create</span>
    </a>
</li>

General CSS is:

a{
    display: block;
    height: 24px;
 }

span.img {
    background: none repeat scroll 0 0 red;
    display: block;
    float: left;
    height: 24px;
    width: 27px;
}

#main #sidebar #createNavigation ul li.hideText span.text {
    display: block;
    text-indent: -9999px;
}

Answer 1

I agree with @ptreik – it is the use of display: block that is causing your problems.

You can change your CSS to the following and it will work:

a{
    /* display: block;   remove this */
    height: 24px;
}

span.img {
    background: none repeat scroll 0 0 red;
    /* display: block;   remove this as `float: left` does this for you */ 
    float: left;
    height: 24px;
    width: 27px;
}

#main #sidebar #createNavigation ul li.hideText span.text {
    /* display: block;   remove this */
    float: left;    /* add this */
    text-indent: -9999px;
}