Results 1 to 2 of 2

Thread: Solving z-index Bug in IE

  1. #1
    Join Date
    Aug 2007
    Germany, NRW

    Question Solving z-index Bug in IE


    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 Code:
                        <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 />&#196;nderungsdatum: 13.10.2008 15:37 Uhr<br />Gr&#246;&#223;e: 43kb</span>
      /* 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&#37;;  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


  2. #2
    Join Date
    Mar 2007
    you could set:
    which would set all the elements by default to a certain z-index unless defined otherwise

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center