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>