The Innocent Statement

Comments ( 24 )

1. Hass

   Hey, z-index always confused me too, it seems to work sometimes and not others, something about what the parent element is or some tomfoolery. I'll see what my nOOb eyes can see, but first I gotta eat!
   09 April 2004 at 16:52

2. Phil Baines

   Thanks mate!
   
   A Fresh pair of eyes makes all the difference sometimes. But not on an empty stomach.
   
   While your eating, I'm gonna go shower-up for a bit of socailising tonight.
   09 April 2004 at 17:00

3. Hass

   Good luck with the ladies...

   Try this...
   
   #container {z-index: 1}
   
   .sidecol {z-index: 5}
   
   I didn't save all your images to see if it totally works, but it's on the right track.
   09 April 2004 at 17:52

4. Hass

   Oops

   Hang on, I'm way off...
   09 April 2004 at 17:55

5. Phil Baines

   yeah that kinda messed everything up. lol.
   
   the problem is that #maincol must have a z-index of 1 so that it is higher than the #sidecol
   
   then the div in my <li> must have a z-index of 2 to put it above the #maincol. for this reason the #sidecol can not have a z-index.
   
   it should work fine like this, but for some reason, doesn't in IE.
   
   I'm off to see the 'ladies', as you so rightly put it. I stink of Burberry. ;o)
   09 April 2004 at 18:13

6. Phil Baines

   PS

   I've just updated the CSS so that the above is true. rather than the #maincol having 3 and the DIVs having 20. it made no sense anyway. :)
   
   
   09 April 2004 at 18:16

7. Hass

   Warning: Don`t attempt on alcohol!

   This can wait till tomorrow, hopefully your in a passionate love embrace and not reading this! I misstyped , it wasn't supposed to be #container, but forget it anyway, I wasn't seeing the background images before and that's where the problem is...
   
   Would you consider having the pop-ups positioned to the right (out from under the main column background) instead of to the left? Might be easier than trying to debug the z-index thing!
   09 April 2004 at 18:40

8. Eric

   If no z-index is specified, it is set to "auto" where it takes the z-index of the parent. In this case, the parent of sidecol is contentcontainer, which is before maincol in the document tree and therefore is behind it by default.
   
   So anything in it is still a child of an element which is underneath your maincol, and none of those children should be above. The spec says that z-indexes are relative to their parents; the parent of your flyouts is still sidecol, and the z-index is in relation to sidecol.
   
   The parent of a z-index element sets up a new context for positioning where z=0. The children are all references to that (i.e. they will stack in the z-order you specify as long as they are siblings), but they will all have the parent's z-index with reference to othe page elements.
   
   I don't know; I'm not an expert on z-index, but it looks like IE is doing the right thing and Mozilla is actually wrong. Please, correct me if I'm missing something here; I'd like it to work the way Mozilla does it, but it doesn't look like the spec does that.
   09 April 2004 at 18:56

9. Eric

   If no z-index is specified, it is set to "auto" where it takes the z-index of the parent. In this case, the parent of sidecol is contentcontainer, which is before maincol in the document tree and therefore is behind it by default.
   
   So anything in it is still a child of an element which is underneath your maincol, and none of those children should be above. The spec says that z-indexes are relative to their parents; the parent of your flyouts is still sidecol, and the z-index is in relation to sidecol.
   
   The parent of a z-index element sets up a new context for positioning where z=0. The children are all references to that (i.e. they will stack in the z-order you specify as long as they are siblings), but they will all have the parent's z-index with reference to othe page elements.
   
   I don't know; I'm not an expert on z-index, but it looks like IE is doing the right thing and Mozilla is actually wrong. Please, correct me if I'm missing something here; I'd like it to work the way Mozilla does it, but it doesn't look like the spec does that.
   09 April 2004 at 18:56

10. eric

    sorry

    I got a jet database error when posting, so i posted again before thinking of reloading to see if the comment went thru :)
    09 April 2004 at 18:58

11. Hass

    Yes, which is why the only way to do it would be to set your maincolumn background to an element farther down in the chain (right?) So just move the pop-ups to the right so that they'll be visible.
    09 April 2004 at 19:46

12. Eric

    Yes; an example of how imperfect the separation of content and presentation really is.
    
    You could either set the sidebar to be on top and redo your background images/sizes to make it work, or you could just move the popups to fit in the visible portion. I can't really tell why you have the sidebar overlapping and underneath the maincontent anyway.
    09 April 2004 at 21:10

13. Phil Baines

    Eric, the side col is hidden underneath the main col because on some pages the maincol is shorter than the side col. thus the side col needs to look as if is continues on underneath the main col.
    
    Hass, I have move the posistioning of the pop-ups to the right for IE, so they will look ok at the moment. But I still want to work out why the z-index is not working. I tried giving the content container a specified z-index to get around what Eric said, but it still didn't work.
    
    Using the right hand side position puts it off the screen for 800x600 IE users, and I don't want that.
    
    Also, there was no love embraces last night :(
    
    Maybe tonight will be better. :)
    10 April 2004 at 12:24

14. P L Schleuter

    transitional

    Somewhat new to this, but have you considered the "transitional" vs the "strict" in your DTD?
    From what I have read, the use of transitional with the xhtml declaration, can cause IE into "quirks" mode.
    I have been tasked to revise our webpages to conform to W3C standards using CSS and HTML. I haven't started on that project yet, since I still have a lot to learn.
    I do like your site layout and the use of the pop-outs.
    10 April 2004 at 14:50

15. Eric

    IE triggers quirks mode with a xml declaration at the start of the page - the doctype alone should keep it in "compliant" mode.
    
    Phil, I wasn't suggesting you change the content container z-index...if I understand the spec correctly, you shouldn't be able to get the effect you want with CSS for this simple fact:
    
    The sidebar is under the main column. The popouts are children of the sidebar. Therefore, the popouts are always under the main column.
    
    I hope I am wrong, but I don't think you can have it both ways - if you don't want the sidebar to look funny when it's longer, how does the UA know that you want the popouts to overwrite your maincolumn? It doesn't really know that they're popouts - to the UA, they're just content, and content that it shouldn't be putting on top of the elements you have said are more important.
    10 April 2004 at 15:28

16. Eric

    Sorry about last night :)
    10 April 2004 at 15:28

17. Hass

    Phil, I just had a thought...
    
    What about using the pop-ups for all but IE, and feeding "title" tooltips to IE? They won't be nifty semi-transparent, but they'll always be on top.
    
    PL, DOCTYPEs, Quirks mode and much more are covered pretty thoroughly at positioniseverything.net ,check 'em out, they have good stuff.
    10 April 2004 at 16:29

18. Phil Baines

    That was pretty much what I had before. And the title tags got in the way of the firefox pop-ups. It would be too much hassle to work out th User Agent and make changes.
    
    I'll check out PIE tomorrow when i'm working on wubbleyew
    11 April 2004 at 14:33

19. Phil Baines

    I shifted them back over to the left in IE again for debugging. I have posted a link on the CSS-Discuss list, and I am hoping that some of those guys might comment here with their ideas.
    
    I guess I am just hopinh Eric is wrong, and that it is possible. Time will tell.
    
    p.s. Last night was better! :)
    11 April 2004 at 23:45

20. Hass

    Hoo! Eric's right though, I'm pretty sure. Find an element lower down in the chain to hang your main background image on, can you do that?
    12 April 2004 at 13:36

21. Phil Baines

    Both the #maincol and the #sidecol are inside the #contentcontainer, but niether of them is inside the other, so they are entirely seperate from each other.
    
    If the #contentcontainer has no z-index, then giving the #maincol a z-index should not change the possibility of giving elements inside the #sidecol a higher z-index. because #maincol and #sidecol are parallel to each other in the tree. Or so I thought.
    
    It may seem like I am taking an awfull long time about this, but the truth is I haven't been online that much this weekend. Easter weekend and all that. So I emagine I will be able to have a GOOD look at it tomorrow. Hopefully.
    12 April 2004 at 13:42

22. Eric

    What you said in paragraph 2 is exactly right - you can assign whatever you want to the elements within #sidecol. The key is that they are within #sidecol, so their relationship to all other elements on the page is through proxy with #sidecol. You can't have #sidecol below #mainCol except for a few elements, because they inherit their z-position from their parent (#sidecol) which you want underneath #maincol.
    
    Again, we're all hoping I'm wrong...but I think you're gonna need to find another way to attach your background image if you want this to work.
    12 April 2004 at 15:31

23. Zoe

    bad news

    I'm pretty sure Eric is right. If #sidecol is underneath #maincol, everything contained within #sidecol should also be underneath #maincol, including the popups.
    13 April 2004 at 12:27

24. Phil Baines

    Yeah Eric, I think you’re right now. I've done a bit of reading, and testing, and it seems impossible.
    
    I've been finding it hard to believe because I have never come across Firefox getting something this wrong before. It sure is strange.
    
    The thing is, I cant reposition the background images in any way, because they flow with the content of #maincol and #sidecol, thus they must be attached to the div’s holding the content.
    
    What I want to do now, is to have the pop-ups positioned within the #sidecol, and places on top of everything inside the #sidecol. This should be possible now, I thought, because I am not trying to get it on top of the #maincol.
    
    But still for some reason, IE is having problems with this.
    
    I've only just woken up, and I’m feeling rather ill today after a weekend of 'activities', so I probably wont be able to test till this evening.
    
    13 April 2004 at 14:59

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.