Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <pre><code>div.videoPreviewImg { position: relative; } </code></pre> <p>The 'wrapping' div of your playbuttons is positioned relative while the playbuttons itself are positioned absolute.</p> <p>Absolutely positioned elements are removed from the document flow. They position themselves relative to their parent. If a containing div is positioned relative, then the contained absolutely positioned div will position itself within that parent. HOWEVER, because the absolutely positioned element is removed from the flow, the parent div will collapse because, as far as it is concerned, it does not contain anything.</p> <p>If the containing div is not positioned, then the absolutely positioned div will use the next level up parent.</p> <p>So you can change the position:</p> <pre><code>div.videoPreviewImg { position: absolute; } </code></pre> <p>Or try and set the position of the playbuttons to relative and then adjust their appearance with <code>margins</code>.</p> <p>Also, don't blame FF. You have probably tested it in IE which implies that FF is right, but IE is not. </p> <p>Good luck!</p> <h2>UPDATE</h2> <p>Looking at your website in Firefox edition 3.6.28 I found the following:</p> <p><img src="https://i.stack.imgur.com/DrlQ5.jpg" alt="enter image description here"></p> <p>Where, as you can see, the first preview button shows perfectly.</p> <p>I then continued to look at your code, and to my astonishment, I found the following:</p> <pre><code>&lt;div class="videoPreview"&gt; &lt;a class="video1" href="#"&gt; &lt;div class="videoPreviewImg"&gt; &lt;img class="actualVideoPreImg" src="img/promo/groupFitness.jpg"&gt; &lt;img class="playButtonHover" src="../img/playButtonHover.png"&gt; &lt;img class="playButton" src="../img/playButton.png"&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="videoPreview"&gt; &lt;a class="video2" href="#"&gt; &lt;div class="videoPreviewImg"&gt; &lt;img src="img/promo/mealPlans.jpg"&gt; &lt;i class="playButtonHover"&gt;&lt;/i&gt; &lt;i class="playButton"&gt;&lt;/i&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="videoPreview"&gt; &lt;div class="videoPreviewImg"&gt; &lt;img src="img/promo/personalTraining.jpg"/&gt; &lt;i class="playButtonHover"&gt;&lt;/i&gt; &lt;i class="playButton"&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; //etc. etc. etc. </code></pre> <p>If you look closely, you can see that only for the first <code>img</code>, the syntax of the playbuttons is correct. For the other videos, the playbuttons are declared as:</p> <pre><code>&lt;i class="playButtonHover"&gt;&lt;/i&gt; &lt;i class="playButton"&gt;&lt;/i&gt; </code></pre> <p>Whereas (of course) they should be</p> <pre><code>&lt;img class="playButtonHover" src="../img/playButtonHover.png"&gt; &lt;img class="playButton" src="../img/playButton.png"&gt; </code></pre> <p>Just as for the first video.</p> <p>So actually, the buttons do appear but without an image.</p> <p><em>This begs the question: then why does it work in Chrome?</em></p> <p>Then I found something very remarkable again:</p> <p><img src="https://i.stack.imgur.com/SdruJ.jpg" alt="enter image description here"></p> <p>As you can see, chrome does not have the correct syntax at all. So what I think happens is that Chrome has a very smart 'code-fixing' system behind it which 'guesses' the correct syntax if you made a syntax error.</p> <p>But then again how does chrome know which image to grasp from the server?</p> <p>Anyway, I think if you fix the <code>i tags</code> which are normally only used like <a href="http://www.w3schools.com/tags/tag_i.asp" rel="nofollow noreferrer">this</a>, then you will be fine.</p> <p>You can either replace the <code>i tags</code> by using a <code>div</code> or just replace it (like I mentioned before) with an <code>img</code> tag.</p> <p>Good luck!</p>
    singulars
    1. This table or related slice is empty.
    1. POAbsolutely positioned play button icon not showing in Firefox
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJean-Paul
    1. USJean-Paul
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POAbsolutely positioned play button icon not showing in Firefox
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COHi Jean-Paul, thank you for the input. I actually first tested it in Chrome, where it worked fine. Have yet to test in IE. I can't set the position to relative because it will preserve a space below the image where the icons would normally be positioned, plus I will have to use px to move it where I want it, which doesn't fit with the responsive design. I also tried your suggestion of changing the positioning of the videoPreviewImg div to absolute, but that did not fix the problem either.
      singulars
      1. PO
      1. USBrandon McPeak
    2. COI'm perplexed why it is not working, because I used the same method ont the site's front page (see index page of site linked in post) to get a yellow bar and text positioned above some images. See the following comments for the code.
      singulars
      1. PO
      1. USBrandon McPeak
    3. CO`<div class="promoItem"> <img src="img/promo/groupFitness.jpg"> <div class="colorBG"></div> <div class="promoLabel">Group Fitness Classes</div> </div>`
      singulars
      1. PO
      1. USBrandon McPeak
 

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