Databases
StackOverflow2013
Postsdbo
POExtra spacing below my in-line images
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtra spacing below my in-line images
    primarykey
    data
    text
    <h2>Background</h2> <p>I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using <code>display:inline-block</code>. The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels. </p> <p>What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.</p> <p>Here's an example of where I am right now: <a href="http://jsfiddle.net/shaunp/HvZ5p/" rel="nofollow">http://jsfiddle.net/shaunp/HvZ5p/</a></p> <p>The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?</p> <h2>HTML</h2> <pre><code>&lt;div class="inline"&gt; &lt;div class="bg-thumb"&gt; &lt;div class="cell-thumb"&gt; &lt;a href="#" rev="#nvcCaption#" class="shadow"&gt; &lt;img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="vcCaption"&gt;Caption&lt;/div&gt; &lt;/div&gt; &lt;div class="inline"&gt; &lt;div class="bg-thumb"&gt; &lt;div class="cell-thumb"&gt; &lt;a href="#" rev="#nvcCaption#" class="shadow"&gt; &lt;img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="vcCaption"&gt;Caption&lt;/div&gt; &lt;/div&gt; </code></pre> <h2>CSS</h2> <pre><code>body { overflow:hidden; margin:0 50px 0 50px; } .vcCaption { text-align:center; font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; color:#000; margin-bottom:5px; } .inline { display:inline-block; } .bg-thumb { width:250px; height:170px; } .bg-thumb { text-align:center; display:table; margin-bottom:5px; } .cell-thumb { display:table-cell; vertical-align:middle; border:5px solid #000; background-color:#7f7f7f; } .thumbImg { max-width:240px; max-height:160px; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USShaun
    1. USShaun
    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. POExtra spacing below my in-line images
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POExtra spacing below my in-line images
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POExtra spacing below my in-line images
      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