www.webdeveloper.com
Results 1 to 2 of 2

Thread: Solving z-index Bug in IE

Hybrid View

  1. #1
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76

    Question 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 />&#196;nderungsdatum: 13.10.2008 15:37 Uhr<br />Gr&#246;&#223;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&#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

    Jens
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    you could set:
    Code:
    *{z-index:1;}
    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



Recent Articles