Home/ Questions/Q 989103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:44:17+00:00

I am have buttons like this: <button type=button class=img img_button_bla onclick=…>Bla!</button> The img class

  • 0

I am have buttons like this:

<button type="button" class="img img_button_bla" onclick="...">Bla!</button>

The img class is:

.img {
display:inline-block;
border:0 none; 
background-image:url(/i_common/master.png) !important; /*regular sprite image*/
background-image:url(/i_common/master.gif); /*sprite image for ie*/
}

The img_button_bla class simply sets the width, height and background position.

What I am trying to do, is to style the button so the Bla! does not show on the button. I tried text-indent:-9999px; Which mostly worked, but not in IE7. For some reason, in IE7 only SOME of the buttons styled this way do not show up at all, but the space the button takes up is just blank.

I have also tried setting line-height:0;font-size:0 which almost works except for a little black line that shows.

I also tried changing it to block:display which fixes the problem in IE7, but then messes up the layout since needs to be a inline-block.

I have tried searching around, but couldn’t find any answer where it is using a button tag, a display of inline-block and using a sprite image.

Anyone have any ideas of what I could do to get this to work? I don’t want to remove the text inside the button tag(there where no problems before because they used to be empty) for accessibility reasons and so the buttons will still show up in the mobile version of the site(basically no css on it).

Edit:

I was able to make an example file showing the problem, although in the example it doesn’t work in IE8 either. Below works in FF and Chrome

<html>
    <head>
        <STYLE TYPE="text/css">
          #content {
              width: 980px;
              margin-left: auto;
              margin-right: auto;
              padding: .5em;
              background-color: #fff;
              text-size: 1.1em;
          }
          .left {
              float: left;
          }
          .right {
              float: right;
          }

          .img {
              display:inline-block;
              border:0 none; 
              background-color:red; /*using color instead of sprite image for easyer testing */
              text-indent:-9999px;
          }
          .img_button {
              width:50px;
              height:25px;
          }
        </STYLE>
    </head>
    <body>
        <div id="content">
            <div class="left">
                <button class="img img_button">Hi!</button>
            </div>
            <div class="right">
                <a href="" class="img img_button"> There</a>
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    FYI, you can style input type=submit instead of having to rely on the buggy button element which is NOT recommended because in certain cases it passes the wrong information.

    I have a snippet @ http://work.arounds.org/using-css-sprites-with-input-type-submit-buttons/ which you can base it off..

    <input type="submit" id="submit" value="Get rid of me please">

<style>
input#submit {
border:0;
background:url(sprite.gif) no-repeat 0 200px;
text-indent:-999em;
line-height:3000;
width:200px;
height:200px;
}
</style>

    The line-height is for IE and text-indent is for modern browsers. You might need to specify a text-indent of 0 for IE since it doesn’t apply text-indent offsetting.

    • 0