SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 z-index nested div issues

    Hello,

    We have an interesting z-index problem in IE7.

    Have a look at the page here in IE7: http://schoolsmaster2.lanetest.com/events/

    As you can see, div.tec-tooltip with z-index: 1001 is not displaying properly.

    I've included the basic structure below:

    Code HTML4Strict:
    <td>
    <div class="daynum tec-event">Calendar day</div>
    <div class="sp_events">
        <a href="#">Link to event</a>
        <div class="tec-tooltip">Tooltip content here</div>
    </div><!-- / .sp_events -->
    </td>

    It should be noted that we have tried the following with no success, in light of IE7's known z-index issues:
    Code CSS:
    *+html .tec-calendar div.sp_events {z-index:1000;}
    .tec-calendar div.sp_events .tec-tooltip {z-index:100;}
    *+html .tec-calendar div.daynum {z-index:1 !important;}

    We are looking for a pure CSS solution to this issue.

    Any help at all is greatly appreciated. Thanks in advance!

    Aaron

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    This is an extremely awkward situation. Is EVERY LINK in that entire table going to have a hover box? If so, then this should suffice, although it's not a pretty solution.

    Basically, as you realize, IE 7 and down sets the value for z-index to 0. Overlap is to be expected. You have to manually set the z-index's as such
    Code:
    .tec-calendar tbody{position:relative;}
    .tec-calendar tbody td div+div{z-index:1;}
    .tec-calendar tbody td div+div+hr+div{z-index:2}
    .tec-calendar tbody td div+div+hr+div+hr+div{z-index:3;}
    .tec-calendar tbody td div+div+hr+div+hr+div+hr+div{z-index:4;}
    This won't work in IE6 (if you want it to work, manually add a class to each div (that has a z-index "test" in it) and set the z-index manually there, and then my code I just posted, won't be needed).

    It'd be a lot better if I knew the scope of your page though. Is that page basically the final product (minus content)? Or were you having so many columns/rows of the hover, merely to demonstrate the problem?

    Technically, since you have different rows of stuff, z-index's can overlap others in the table...again, would be better to know the scope of your project, but this should account for everything...
    Code:
    .tec-calendar tbody{position:relative;}
    .tec-calendar tbody tr td div+div{z-index:1;}
    .tec-calendar tbody tr td div+div+hr+div{z-index:2}
    .tec-calendar tbody tr td div+div+hr+div+hr+div{z-index:3;}
    .tec-calendar tbody tr td div+div+hr+div+hr+div+hr+div{z-index:4;}
    
    
    .tec-calendar tbody tr+tr td div+div{z-index:5;}
    .tec-calendar tbody tr+tr td div+div+hr+div{z-index:6}
    .tec-calendar tbody tr+tr td div+div+hr+div+hr+div{z-index:7;}
    .tec-calendar tbody tr+tr td div+div+hr+div+hr+div+hr+div{z-index:8;}
    That covers two rows. You'd need to copy the last segment of that code again, and make it tr+tr+tr (3 instead of 2).

    Complicated . But it's CSS only.

    A JS solution would work more efficiently, although probably not the best for this considering JS can be turned off...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Clarification, when I say you'd need to copy the last segment of code again, I mean if you have 3 rows, you need tr+tr+tr. If your example code has seven trs, it needs tr+tr+tr+tr+tr+tr+tr...etc.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    Yes, every link will have a tooltip hover box. In terms of IE, we are only developing for IE7+.

    In terms of scope, we do not know how many events will be on one particular day. This component is being deployed across 26 different websites for 26 different schools, so flexibility is key (one of the reasons why we were hoping for a CSS based solution).

    We are open to a javascript/jquery solution if CSS-only is not viable.

    We've tried the following code snippet, but not exhaustively, with no success.

    http://css-tricks.com/snippets/jquer...ng-ie-z-index/

    Code JavaScript:
    $(function() {
           var zIndexNumber = 1000;
           // Put your target element(s) in the selector below!
           $("div").each(function() {
                   $(this).css('zIndex', zIndexNumber);
                   zIndexNumber -= 10;
           });
    });

    Again, any help is appreciated!

    Thanks!
    Aaron

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well I basically gave hte CSS approach. The non ...ugly (if you couldeven call it that) solution would just be to add a class to each cell and give the z-index accordingly.

    That being said, if you don't want to use a CSS approach (given the options) you can press the little red flag button, at the bottom left of each post, and in the comments, ask for a move to the Javascript forum .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

Bookmarks

Posting Permissions

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