Databases
StackOverflow2013
Postsdbo
POCSS div overlay and jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS div overlay and jQuery
    primarykey
    data
    text
    <p>This is more or less a <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow noreferrer">CSS</a> question but I am using it with <a href="http://en.wikipedia.org/wiki/JQuery" rel="nofollow noreferrer">jQuery</a>. OK, so basically what I have is this:</p> <pre><code>&lt;div style="overflow: hidden; width: 1000px; height: 450px; background-color: rgb(0, 0, 0); position: relative;" id="wrapper"&gt; &lt;div style="background-color: rgb(255, 255, 255); opacity: 0.9; top: 0pt; left: 0pt; width: 1000px; height: 450px; position: absolute; z-index: 500;" id="mask"&gt;&lt;/div&gt; &lt;div class="ui-draggable" style="margin: 60px auto auto; position: relative; width: 1550px; height: 340px;" id="test"&gt; &lt;div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Chrysanthemum.jpg"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Desert.jpg"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Hydrangeas.jpg"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style="float: left; margin-left: 10px; width: 100px; position: relative;" class="row"&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Jellyfish.jpg"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Koala.jpg"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 100px; margin-top: 10px; position: relative;" &gt;&lt;img style="width: 100px; height: 100px; position: relative;" class="img" src="/images/Lighthouse.jpg"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="position: absolute; left: 978px; top: 223px; color: rgb(255, 255, 255);" id="next-btn"&gt;Next&lt;/div&gt; &lt;div style="position: absolute; left: 8px; top: 223px; color: rgb(255, 255, 255);" id="prev-btn"&gt;Prev&lt;/div&gt; </code></pre> <p>What I am doing with the mask div is trying to get it to overlay the whole wrapper. So I set its width and height to the height of the wrapper. This works fine in Firefox, Chrome and Safari.</p> <p>However, in Internet Explorer it is not working. How can I make this overlay?</p> <p>I tried setting the position to absolute which worked fine except one thing. There is something that is going on top of this mask. Its position is relative. I set the one on top to a z-index of 1000 and the mask to 500. However it seems there is a bug in Internet Explorer that automatically makes an absolute div be on top of everything.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPeter Mortensen
    1. USngreenwood6
    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
    1. VO
      singulars
      1. POCSS div overlay and jQuery
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POCSS div overlay and jQuery
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POCSS div overlay and jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COInclude the css for those elements in the question, just paste it in, and/or include a link to where you have this online.
      singulars
      1. POCSS div overlay and jQuery
      1. USJarrett Widman
    2. COngreenwood6, why ought anybody give you an answer if you don't award them for their efforts? I'm not being rude or short with you, I'm simply inviting you to better your experience and the experience of others by fully participating in StackOverflow.
      singulars
      1. POCSS div overlay and jQuery
      1. USSampson
    3. COupdated code with output of generated source. this is pretty much going to be a photo gallery but another problem I found is that when I setup a click event for the images. But when the images are clicked in ff its fine but in ie the other images below it move down. I HATE IE. I have to leave the images as relative because I am moving it relatively due to its offset on the page. Absolute screws it up.
      singulars
      1. POCSS div overlay and jQuery
      1. USngreenwood6
 

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