SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    IE6 z-index bug biting me...

    Hallo all,
    I've got a situation where I couldn't use the usual solutions (yeah including the Become a white water rafting tour guide solution). I'm kinda hoping just typing this out will do the trick for me, and if not, I hit Submit.

    I've got a rel-po'd ul with abso-pod' anchors (this is redo of one of my CSS maps... now it's usable without images! yay).

    The anchors are positioned over the individual clickable parts of the map.

    Each anchor has two abso-po'd elements inside it: an empty b who holds the slidy part of the image, and a span holding the anchor text. I'm sure if I think about it, I can lose one element, but the old design has the spans offscreen and they come onscreen like a label on hover/focus. So I couldn't find a good way to move the text individually from the anchor itself without this wrapping span.

    Anyway, the b is positioned at a higher z-index (50) than the spans (5), keeping the image held by the b's above the spans and hiding the text. No image, the spans just show as they should. Yay.

    When the anchors get hovered or focussed, the z-index of the span goes up to 100, making it appear. Also gets a change of background colour to help those with CSS on but no images. I think I got the idea of switching z-indeces from Eric Watson. Works in Opera and IE7 (haven't checked 8 yet but expect it to work).

    IE7 needed the z-index increased on teh anchors themselves upon :hover (though the goal was to raise the z-index of the b's alone, so other b's can't overlay the hover sections of the map), which would be the main IE z-index bug, but nothing so far as worked for IE6.
    IE6 keeps the span under the b's, and after a single round of hovering, keeps the spans above (except during hovering). So I see the :hover is triggering something, and tried explicitly setting low z-indeces on the b while raising on the span, tried changing the source order of span and b (moved the b's to later in source, didn't matter), tried the visibility trigger on the a:hover in case that was it...

    General idea:
    Code:
    <ul id="kaart">
    ...bunch of links like this one
      <li><a id="oz" href="foo"><span>OceaniŽ</span><b></b></a></li>
    </ul>
    CSS
    Code:
    #kaart {
      position: relative;
      width: 600px;
      height: 340px;
      margin-left: 10px;
    }
            #kaart li {
              display: inline;
            }
    
            #kaart a, #kaart a b, #kaart a span {
              position: absolute;
              text-decoration: none;
            }
    
                    #kaart a b {
                      left: 0;
                      top: 0;
                      width: 100%;
                      height: 100%;
                      background: url(../../images/kaartshr.png) 0 0 no-repeat;
                      z-index: 50;
    	        }
                            /*voor de "b" maar IE wil op de parent*/
                            #kaart a:focus, #kaart a:hover {z-index: 52;}
    
                    #kaart a span {
                      left: 40%;
                      top: 40%;
                      padding:  2px 5px;
                      color: #000;
                      font: .8em/1em baskerville, georgia, "times new roman", serif;
                      text-align: center;
    	          white-space: nowrap;
                      border: 1px solid #000;
                      z-index: 5;
                    }
    
                            #kaart a:focus span, #kaart a:hover span {
                              background-color: #fbeb92;
                              z-index: 100;
                            }
    
    ...
    
    	#oz {
      	  left: 466px;
      	  top: 217px;
      	  width: 112px;
      	  height: 102px;
    	}
                    a#oz b {
                      background-position: -466px -217px;
                    }
    	                #oz:hover b, #oz:focus b {
    	                  background-position: -600px -200px;
    	                }
    tried also
    #kaart a {z-index: 1;}/*also tried very very high z-index*/
    * html #kaart a:hover {visibility: visible;}/*just in case*/
    I tried setting a transparent background-color on the span beforehand, in case adding it on :hover/focus was setting it off.

    If the span and b weren't being abso-po'd, I prolly would have blocked and margin-positioned the anchors instead.

    Anyway, I'm pretty sure some combination I didn't think of could fix this. If not, the map's ugly but optional, and IE6 users just get weirdness (they could also still use it, I guess). However we have a good % of them, so ideally I'd like to know what I'm screwing up here. While I'm sure it's a z-index bug, the "triggering" happening on the first hover after refresh suggests also a state bug.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi Stomme, could you provide a link? A test page if you will?

    As you know it makes debugging a whole lot easier considering we can see what we are doing (and it's just plain easier, for me anyway )
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I ended up giving IE6 something completely different: the ul itself has the whole map as a background, the b element is display: none (so no hover light-up effects), the span just sits on top without background colour and when you hover over it, the background colour changes.
    But if you wanted to pick at it for the lawlz, here's the page (the big world map on the left if you scroll a bit). Sorry there are 3 CSS files, but I finally had enough IE-can't-deal-with-inline-block-or-display-table that they did finally get their own sheet.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Tested the page with the conditional comment file not being there (ah that name of the file made me lol)

    This works perfect in IE6
    Code:
    #kaart a span
    {
    	background:url(fake.jpg) -1px -1px;/*IE keep focus*/
    	visibility:hidden/*hide*/
    }
    #kaart a:hover span
    {
    	z-index:51;/*higher z-index then b*/
    	visibility:visible;/*show*/
    }
    Edit:

    Edited my post..I tested the page without the CC file
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    However...
    hiding the span cannot be allowed... that is, we must pass the no-images test.

    And, without the CC file, the whole page is completely destroyed (I checked just to see how bad it would be... the map wasn't even able to stay on the page). I'm using much too much min-max widths, heights, inline-block etc for that page to even begin to work without it : )

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well it appears IE6 won't c hange the z-index of hte b on hover which is really screwing this up.

    You could use JS to probably fix that,
    Right now I have this
    Code:
    #kaart a span
    {
    	background:url(fake.jpg) -1px -1px;/*IE keep focus*/
    	z-index:99;
    
    }
    
    #kaart a:hover b{z-index:98;}
    It starts with the names on top. If I make the B a higher z-index by default and then try to lower it on hover, it doesn't work.

    IMO either let IE6 fail the images off scenario, or use that code I just posted in this post and let them have the text on top by default.

    Probalby the best you are gonna get for IE6 . This z-index bug is a pain in the ****
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Which is why I've currently just removed the map-change for IE6. So right now, IE6 is seeing the whole map background with the spans/text just sitting right over parts of the map. So, yeah, they're losing out on a bit of flashiness, but oh well.

    All other browsers are getting a highlight along with the text, and degrades images-off, which was important to me.

    Still, since I'm getting a trigger effect, I think it could still be solved somehow. But, we're totally rewriting this site so suddenly I actually have work to do! So I'm leaving it like so for now...

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sounds like hte best idea
    I just read your edit to your last post about not having the CC file in there, I know it destroyed the page but I wanted you to know that I didn't also have your fixes for the map working in with what I had

    Glad you found an alternative though
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hey I really appreciate you taking a look. You're pretty good at finding the causes of particular browser bugs. Thanks, Ryan.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi mallory, This works for me

    Code:
    * html #kaart a:hover b{z-index:-1}

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul, I tried doing that (I know I did) and that didn't work...well I tried making the z-index lower then the spans..any reason for the negative?

    And yeah Stomme, I knew basically what was causing it, though it kinda threw me off that IE6 wasn't allowing a z-index change on hover (it would allow z-index through a regular declaration (without hover))
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Paul, doesn't that break on K-Meleon because it uses FF2's rendering engine?

    Yeah I too wonder then they're going to upgrade. FF2 is an unsupported browser but K-Meleon is regularly upgraded.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Paul, doesn't that break on K-Meleon because it uses FF2's rendering engine?

    Yeah I too wonder then they're going to upgrade. FF2 is an unsupported browser but K-Meleon is regularly upgraded.
    ?? * html only works for IE6 - You know that

    The fix is working in IE6 as I have a copy running locally now. I just deleted the alternative IE rules you had and added my fix and away it went. It has to be a negative z-index (z-index -1) as it moves the element underneath and allows the text to stay on top.

    Works perfectly

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ?? * html only works for IE6 - You know that
    Duh, all I looked at was the -1. Lawlz. Thanks Paul.

    geen slimme poes!

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You're playing with positioning WAY more than you should have to there - especially z-index which should only be needed twice. The reason you are not getting the proper depth sorting is you need to trip a re-render on hover... there are two ways to do that.

    The first solution is called zoomfix. It is NOT using zoom as a haslayout trigger so much as tripping a re-render for depth sorting that the normal dimension declarations do not. I dislike using zoom when I don't have to, so lets look at the second approach:

    Display state change. If you change the display property in CSS on hover, IE will render the changes. Since we're talking absolutes there's no harm in setting unhovered to display:inline and hovered to display:block - so we'll use that.

    I also think you got a bit too complex on your image slides - you're stating background-position TWICE as much as you need to, and you seem to be using transparency for no good reason.

    I went through first and re-did the image so we'd have something simpler to work with:

    http://www.cutcodedown.com/for_other...s/worldMap.png

    and then went through and made up some new CSS for ya.

    http://www.cutcodedown.com/for_other...Map/screen.css

    Giving us this as a test result:
    http://www.cutcodedown.com/for_other.../template.html

    Works across all browsers just fine. (even back to IE 5.5) without any real nasties in it.

    Not TOO many changes though the biggest is setting the anchor to overflow:hidden chopping off the extra-large B tag. Instead of sliding the background on hover, I just slide the entire bold tag up so we don't have to re-state background-position for every hover state (which is a royal PITA). The image ends up more pixels, but thankfully it's all white-space which .png does an excellent job of compressing... Most of the colors were over a 10&#37; visible range so I chopped it down to 64 colors as well so despite the larger pixel-count it's 3k smaller. I did add two transparent stripes between elements to deal with FF being a retard about it's zoom. I also use text-align and vertical-align with line-height to position the text off spans instead of playing with absolute on them - they do not vertically align in IE7/earlier - frankly IMHO that's an "oh well" - they still work from a functionality standpoint and it's not worth the code to make it 100% identical for images off users in those browsers.

    Basically trying to keep it simple.

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the recode:
    the reason I use transparency in my maps is because there were enough times where a background colour covered another area on :hover. Since it's a flat transparency (takes up the room of just one colour as I index it), it's not like it's expensive transparency.

    Being someone who unwraps the gift before reading the card at Christmas, I went straight to the template first. Why am I not seeing the spans when I hover in my firefux? I do see them when I turn images off.

    Ah,
    Code:
    #kaart a:active,
    #kaart a:focus,
    #kaart a:hover {
    	display:block; /* IE state change */
    	z-index:50;
    }
    Was this for the span? Since the a is already pos-abso, it's already a block, no real change in state... but would make sense for the span.


    Anyway while there are some things I can't use, it's a heck of a lot less code than I currently have, so I'm going to play with it. Thanks!

    *edit
    they do not vertically align in IE7/earlier - frankly IMHO that's an "oh well" - they still work from a functionality standpoint and it's not worth the code to make it 100% identical for images off users in those browsers.
    Fine by me, what would be ideal is if I just had a list of the spans if there were no images, instead of them being positioned still, so IE not doing it right is fine.

    I was thinking, I could do the same thing you did with the b's using my current map, except setting them -600px to the left and then do the same thing.

    *edit2 You also reminded me that my first map is way too big. It really only has 4 necessary colours, but because the map that was given me had been a jpg, it had a lot of artifact on the edges of the continents, plus the repair I had to do (whole chunks of inland were missing in many areas esp there was no Persian Gulf!)... so I had simply indexed it, by default that's 255 colours in Gimp. I only needed enough to keep the edges from getting weird. I've resaved mine at 24 colours and now it's 28kb, and really I'm sure I could get away with 8 or fewer.

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Was this for the span? Since the a is already pos-abso, it's already a block, no real change in state... but would make sense for the span.
    Absolute positioned elements BEHAVE as block, that does not actually set their display state TO block. If you move it to the span, you'll not have proper depth sorting in IE7 - don't ask me why. Even though in IE it's BEHAVING as block, it is still set to display:inline in IE's head, so setting it to block on hover does actually trip the change and one of the wierd little bugfixes.

    Damned if I know WHY it works, but it does. Wierd part is it doesn't work for IE7 unless you state display:inline on the absolute positioned child element (B)... which thankfully also makes FF less prone to breaking on zoom (Notice I said LESS)

    On that note I'd probably 'overcut' the map sections by 3px even if I wasn't planning on displaying that extra 3px around the edges just so you don't get those oddball zoom issues.


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
  •