16 April 2004

Z-index is still killing me, so now I ignore it.

I never did fix the z-index problem I was having last week. However, I would like to thanks all the folks who commented and helped. I learnt a lot about z-index that I didn't know before. Danke! I think that might be my highest comment count so far for a post on here.

It was not because no-body could help that the problem didn't get fixed, it was because there is no help they could give. The problem (I think I have pinned it down) is that IE ignores z-index specification within position:relative element (sometimes). The List Item tag (<li> ) is set to position:relative; so that I can absolutely position the <div> inside it. This guy does a similar thing, by positioning his links relative, and spans inside absolutely.

Because IE seems to ignore the z-index in this case, it goes back to the normal way of organising the stack levels, and using the code to decide how to layer elements. Elements last in the code are rendered last, and therefore rendered above anything else. So, in my case, the links that come AFTER my Div's in the code will be rendered on top of the Div preceding them. But only in IE because Mozilla does not ignore the z-index. This can be demonstrated by checking out this little test I made earlier in both Mozilla and IE.

To overcome this problem, until I have a hack to solve it, I have moved the positioning on the Div's for IE (using the !important syntax to pick it out). I have moved the Div's so that they are positioned above the containing list item, this way they display above the text. My CSS looks a bit like this at the moment:

position:absolute;
top: 14px !important;
top:auto;
bottom: auto !important;
bottom:20px;
right: 120px !important;
right:0px;

Comments ( 9 )

  1. Eric

    I'm more confused than I've ever been about z-index.

    Argh.
    17 April 2004 at 03:03

  2. Hasan

    Eric, me too! Phil, sorry to say it, you left the "e" of "ignore" in this post's title.
    17 April 2004 at 21:47

  3. Phil Baines

    So I did. Doh! I was tired, thats my excuse. :)
    18 April 2004 at 00:47

  4. the grammar nazi

    as long as we`re on the spellcheck thing...

    Maybe it was just for Easter, but your sidebar advertises "Hoppy Cog"...

    ...and "famouse" in the span text

    :)
    18 April 2004 at 02:31

  5. Phil Baines

    Grrrr. There must be a spellcheck extension for firefox out there somewhere!
    18 April 2004 at 15:20

  6. Hasan

    I don`t use it, but...

    http://forums.mozillazine.org/viewtopic.php?t=50794&start=0&postdays=0&postorder=asc&highlight=spellcheck
    Read the whole thread and decide if it might help...I just keep Merriam Webster Online open when I write my posts...
    18 April 2004 at 20:01

  7. Dufus

    Sorry, Dude! Truncate everything after "t=50794", my fault.
    18 April 2004 at 20:03

  8. the link nazi

    might as well get it all out in the open...

    Your link to Shaun Inman actually goes to airbag's xml feed.
    18 April 2004 at 20:08

  9. Phil Baines

    what the .... !!

    how the .... did I manage that one!

    :)

    19 April 2004 at 00:54

Sorry, commenting has been disabled for a while. I am getting a stupid amount of comment spam, and need to find a new way of doing things.

I will not publish your email address, but I may use it to get in contact with you.

HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).

Topics

  • I am more than willing to admit the big gaps in my knowledge on many topics, including web development. This is a topic I use to get help from the community, and my imaginary audience.
    Ask the Audience
  • Even though looking pretty is not the most important layer to a succesful web site (I don't think there is a Most Important), it does help!
    Graphic Design
  • Have you got a sense of?
    Humor
  • The glam, the sadness, the joy, the madness.
    Life of Findel
  • What ever doesn't fit
    Misc
  • I have a crappy camera, but I do try. A good artist always blames his tools.
    Photography
  • Here I chat about projects I am working on, going to work on, or finished. Some of them I will be happy to let you in on, others I will be ashamed of.
    Project Watch
  • Site news and updates
    Site Info
  • Keepin' an eye on the wwwubb
    Watching The Web
  • This topic will be used for talking about all manner of project management issues relating to Wed Development (Wubb Development). Where we may talk about how to code in the Wubb Development topic, we will be more likely to talk about giving quotes, or planning projects, in this topic.
    Working with Wubbs
  • All things Web Development - Web standards, Hacks, Graphics, and more.
    Wubb Development