1 Attachment(s)
Solving z-index Bug in IE
Hallo,
it seems i hit the mysteries of z-indexing with ie. I tried to hover custom css tooltips that are tied to every box in an array of floated boxes over all that boxes. It works with ff and opera. In IE the tooltip is only on top of the own and previous boxes and behind all adjacent boxes.
html
HTML Code:
<ol>
<li>
<a href="dfdf">
<img src="images/content/pdf_icon.jpg" alt="" />
<span class="title">Workshop Nr.1</span>
<span class="date">13.September 2008</span>
<span class="filesize">26 KB</span>
<span class="tooltip">Typ: PDF-Dokument<br />Author: Lorem Ipsum<br />Titel: Workshop Nr.1 - Lorem Ipsum<br />Änderungsdatum: 13.10.2008 15:37 Uhr<br />Größe: 43kb</span>
</a>
</li>
<li>
...
css
Code:
/* Downloads */
DIV#downloads { }
DIV#downloads DIV.category { }
DIV#downloads DIV.category DIV.download { }
DIV#downloads DIV.category H3 { font-size: 1.1em; clear: both }
DIV#downloads DIV.category OL { margin: 0 }
DIV#downloads DIV.category LI { float:left; width:45%; list-style-type: none; margin: 0 1.5em 2em 0 }
DIV#downloads DIV.category IMG { float:left; padding: 0.2em 0.5em 0 0 }
DIV#downloads DIV.category A { text-decoration: none; position: relative }
DIV#downloads DIV.category SPAN { display: block; font-family: sans-serif; color: RGB(151,151,153); font-size: 0.9em }
DIV#downloads DIV.category SPAN.title { color: RGB(25,25,26); font-size: 1.1em }
DIV#downloads DIV.category SPAN.date { margin-bottom: 0em }
DIV#downloads DIV.category SPAN.filesize { }
DIV#downloads DIV.category SPAN.tooltip { display: none }
DIV#downloads DIV.category A:hover SPAN.tooltip {
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 240px;
z-index: 100;
border:1px solid #000000;
background: RGB(230,237,180);
text-align: left;
padding: 0.4em 0.6em;
line-height: 1.4;
font-size: 1em;
opacity: 0.80;
color: RGB(51,51,53)!important;
font-weight: bold;
}
Is there a way to put an element on top of all others independently from the position in the markup?
Greets and hope you can help
Jens
