Databases
StackOverflow2013
Postsdbo
POProblems with a button tag on IE7 styled with a sprite, inline-block and text-indent -9999px
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblems with a button tag on IE7 styled with a sprite, inline-block and text-indent -9999px
    primarykey
    data
    text
    <p>I am have buttons like this:</p> <pre><code>&lt;button type="button" class="img img_button_bla" onclick="..."&gt;Bla!&lt;/button&gt; </code></pre> <p>The <code>img</code> class is:</p> <pre><code>.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*/ } </code></pre> <p>The <code>img_button_bla</code> class simply sets the width, height and background position.</p> <p>What I am trying to do, is to style the button so the <code>Bla!</code> does not show on the button. I tried <code>text-indent:-9999px;</code> 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. </p> <p>I have also tried setting <code>line-height:0;font-size:0</code> which almost works except for a little black line that shows.</p> <p>I also tried changing it to <code>block:display</code> which fixes the problem in IE7, but then messes up the layout since needs to be a inline-block.</p> <p>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.</p> <p>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).</p> <p>Edit:</p> <p>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</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;STYLE TYPE="text/css"&gt; #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; } &lt;/STYLE&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;div class="left"&gt; &lt;button class="img img_button"&gt;Hi!&lt;/button&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;a href="" class="img img_button"&gt; There&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USEcho
    1. USEcho
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POProblems with a button tag on IE7 styled with a sprite, inline-block and text-indent -9999px
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload