Internet Explorer - zIndex/z-index

[Shovel]

Hello all. Who fancies a bit of testing/IE bashing?

Following is a work-in-progress coursework piece, works like a dream in Firefox. Now, for a time I actually forcibly removed the stylesheet from IE because it was behaving so retardedly, however, it seems to work (ish) so I put it back.

http://benward.studentssocial.co.uk/projects/tcpheader/index.html

Just one problem: z-index. As you can see, when you click on one of the cells in the diagram it pops out and will display some information on it. In IE, they don't appear on top (in Firefox they do). The z-index property is defined and I tried adding it into the javascript directly and that made no difference either. I've tried using sensible z-index values (e.g. 0 and 1) and silly ones (e.g. 0 and 5000) and it makes no bloody difference whatsoever.

I'm not a happy bunny... I do still need to test in Opera, but I'm confident that it'll work there as well...

Does anyone know how to make Microsoft's antique monstrosity behave? Or am I stripping the stylesheet and giving it some "text only" instead?

Aside: For those looking for some more power of stylesheets, in Firefox you can toggle the stylesheet on and off - notice the png version of the diagram you get instead of the layout version. Also, with the stylesheet switched on, go to "Print Preview" and see how, again, it lays out the page differently. "Printer Friendly Page"s are dead


~EDIT: PS - I accept that it's not very pretty yet. I'm being a good little Web Dev and getting it working before I start adding pretty pictures

~EDIT 2: It works acceptably in Opera 7.23, so it is indeed Microsoft's bitch that needs flogging...

Anyway, z-index...

 

[sibanac]

http://www.codetoad.com/forum/20_22736.asp

damn that was hard to find, hope it helps


btw i might have to copy the first line in your sig

 

[Shovel]

Thanks sibanac. An interesting read is that one.

It doesn't quite match my problem, though. While that concerns a problem that comes from the implementation of the list control in IE, my page is purely <div> sections.

A small development though, which may lead to a solution:

Currently the diagram is broken down into "rows" as well as cells (tablish terminonology, sorry!). Each row of cells is absolutely positioned on each row, with top=0px;. The idea was to keep them inline. However, I can get the same layering problem to occur in Firefox if I set a z-index to the row class.

For instance:

Row
--> Cell
--> Cell2
Row2
--> Cell
--> Cell

If I set Row2 to have a Z-Index on 0, with default cells a Z-Index of 1 and Expanded Cells a Z-INdex of 2, the layers overlap incorrectly in Firefox. My assumption is that Firefox has some kind of null z-index for undefined items, while IE will assign more influential default. I still don't know why the 0-1-2 assignment doesn't work to be honest, but I shall try changing the document structure and remove the rows, just have them arranged absolutely within one container for the whole diagram.

Thanks though

(You're very welcome to the whole of my sig if you really want it... ahem).