21 April 2004

Z-index, beaten!

Sorry for yet another z-index post, but I thought I should let you know that I have, yet again, changed the stacking levels of the site. I have tried an idea I had to do with IE ignoring z-index within relatively positioned elements, and it seems to be working. So, yes, the earlier posts are now deemed out of date.

When I manage to get the words together later on, I will explain what exactly I have done. It still doesn't work exactly as I would have likes it, but it is better than it was before (for IE users).

In the mean time, you might want to check out the archive pages. I have given them a bit of an overhaul with the new CSS pop-up technique. Let me know what you think of them.

What's changed this time?

Basically, what I have done is take the z-index out from being inside the LI element. You will remember that the LI is absolutely positioned so that the DIV's that act as pop-ups can be positioned absolutely to them. But, IE seems to have some major grudges against z-index within certain elements having position:relative; applies.

My latest work around means that I am actually applying the z-index to the LI tag. For example, what I do is apply a z-index of 1 to all the LI tags in the CSS with this CSS: 

li {
z-index:1;
}

And then, for the hover effect on that LI: 

li:hover {
z-index:2;
}

Because the DIV inside the LI only show on LI:HOVER then the DIV is also giving a z-index of 2, since it falls underneath the LI in the document tree. This means that it will have a higher z-index than all the other LI elements in the list, since they are in their un-hovered state, and remain at level 1 in the stacking order.

For this reason, I can now re-position the DIV underneath the LI tag for Internet Explorer.

Right, I hope that makes some sort of sense. And I hope that I will leave it like this for a while.

Comments ( 1 )

  1. Phil Baines

    PS

    I must also mention, that I am using javascriptto simulate the LI:HOVER effect for IE.

    <li onmouseover="this.className = 'over'" onmouseout="this.className = ''">

    I'm sure that makes some sort of sense.
    25 April 2004 at 15:02

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