Databases
StackOverflow2013
Postsdbo
POz index background issue in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POz index background issue in IE
    text
    copied!<p>I have a jQuery tools scroller set up with controls managing two separate divs of info - one images, the other related text that needs to sit over the top of the images with a transparent bg image. I am using z-indexing to achieve this and am aware of IE's issues with this but am unable to sort it (tested in IE6-8). Image of the issue below:</p> <p><a href="http://test.shakingpaper.com.au/not_working.png" rel="nofollow noreferrer">http://test.shakingpaper.com.au/not_working.png</a></p> <p>It seems that the overlayed div is taking on the containers white. Try as I might, I can't resolve this. HTML/CSS code below:</p> <pre><code> &lt;div id="content"&gt; &lt;div id="nav"&gt;&lt;/div&gt; &lt;div class="s4 slideshow"&gt; &lt;div&gt; &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt; &lt;/div&gt; &lt;div&gt; &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="overlay_bg"&gt;&lt;/div&gt; &lt;div class="s4 information"&gt; &lt;div&gt; &lt;h1&gt;Support&lt;/h1&gt; &lt;p&gt;Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Support Us&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h1&gt;Events&lt;/h1&gt; &lt;p&gt;Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h1&gt;Regional&lt;/h1&gt; &lt;p&gt;Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt; &lt;p&gt;&lt;a href="#"&gt;Support Us&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end of content --&gt; #content { height: auto; min-height: 300px !important; overflow: hidden; position:relative; margin-left: 27px; width: 770px; padding-bottom: 43px; } #nav { width: 60px; z-index: 10000; position: absolute; top:340px; left: 28px; } .s4 { width: 770px; height: 370px; overflow: hidden; } #nav a { background-color: transparent; background-image: url(images/transition.png); background-position: 0 0; text-indent: -1000em; width: 10px; height: 10px; display: block; float: left; margin-right: 5px; } #nav a.activeSlide { background-position: 0 -10px; } #overlay_bg { background: url(images/soild_block.png) no-repeat; width: 318px; height: 339px; z-index: 5000; position: absolute; top: 28px; } .information { position: absolute; top: 60px; left: 28px; z-index: 16000; width: 290px; height: 260px; color: #FFF; } .information h1 { font-size: 50px; font-style: italic; text-transform: uppercase; } .information p { font-size: 17px; line-height: 27px; margin-top: 37px; } .information a { font-size: 13px; padding-bottom: 2px; border-bottom: 1px solid; color: #FFF; text-transform: uppercase; font-style: italic; } .information a:hover { color: #000; } </code></pre> <p>Any help would be greatly appreciated. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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