Text indent defines different div size in chrome and firefox

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;
}

Answers


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;
}

Need Your Help

modals that do not involve dialog windows

html css

Is there an easy library out there to do something along these lines:

Query based on more than 1 field

sql sql-server-ce

not sure how to title this but here is my scenario

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.