Databases
StackOverflow2013
Postsdbo
PODo CSS Sprite images have to have X amount of space between each item?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODo CSS Sprite images have to have X amount of space between each item?
    primarykey
    data
    text
    <p>I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below...</p> <p>I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both the icon and the text should link to somewhere.</p> <p>My first example look how I want it to be. When the <code>font-size</code> is set to <code>10px</code> it looks ok... <img src="https://i.stack.imgur.com/cCwHv.png" alt="sprite ok"></p> <h2>As soon as I change the <code>font-size</code> from <code>10px</code> to <code>16px</code>...</h2> <p><img src="https://i.stack.imgur.com/t8t6M.png" alt="sprite not ok"> </p> <p>Here is the CSS and HTML</p> <h2>CSS</h2> <pre><code>#post-meta-wrapper{ list-style: none; margin:20px 0 20px 20px; width:400px; } #post-meta-wrapper li { width:100%; color: #44495B; border-top: 1px dotted #CCC; color: #999; font-size: 10px; line-height: 28px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 0px; } #post-meta-wrapper li a{ background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px; padding-left:15px; } #post-meta-wrapper .meta-img { background:#fff; width: 15px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 8px; overflow: hidden; } #post-meta-wrapper a:hover, #post-meta-wrapper .active{ background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px; width: 15px; height: 10px; } </code></pre> <h2>The HTML</h2> <pre><code>&lt;ul id="post-meta-wrapper"&gt; &lt;li class="author"&gt; &lt;a href="#"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;li class="author"&gt; &lt;a href="#" class="active"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;li class="author"&gt; &lt;a href="#"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;li class="author"&gt; &lt;a href="#"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;li class="author"&gt; &lt;a href="#"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;li class="author"&gt; &lt;a href="#"&gt;&lt;span class="meta-img"&gt;Test link&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <h2>JSFiddle Examples</h2> <p>This is the first one with the <code>font-size: 10px</code> <a href="http://jsfiddle.net/jasondavis/Mt87G/4/" rel="noreferrer">http://jsfiddle.net/jasondavis/Mt87G/4/</a> </p> <p>This is the MESSED UP one with the <code>font-size: 16px</code> <a href="http://jsfiddle.net/jasondavis/Mt87G/5/" rel="noreferrer">http://jsfiddle.net/jasondavis/Mt87G/5/</a> </p> <h2>Help me?</h2> <p>Ok I know I could just change the sprite image to have huge spaces around each object in the image and then you wouldn't notice this problem, but I would really like to resolve this issue the right way. I mean is it possible to do what I am trying to do with just CSS or does the image need to be spaced out? I have seen other sprite images where they are together close like mine and I have seen some where everything is like 100px apart.</p> <p>Please help me if you know how to resolve this, I have tried eveything I can think of without any luck yet. I need to do this on a mass scale so I would like to get it done correctly now before I do that. Thank you for any help</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJasonDavis
    1. USJasonDavis
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODo CSS Sprite images have to have X amount of space between each item?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODo CSS Sprite images have to have X amount of space between each item?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODo CSS Sprite images have to have X amount of space between each item?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs there a reason that you are not closing the span tags?
      singulars
      1. PODo CSS Sprite images have to have X amount of space between each item?
      1. USKlaus Byskov Pedersen
    2. COCloser the better I'd say, smaller file size etc.
      singulars
      1. PODo CSS Sprite images have to have X amount of space between each item?
      1. US472084
 

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