Firefox ab.positioned img with neg z-index trouble

My first post.

Hi all.

Trying to get round the need for more than one background image in a div by making one of the images a background image as normal, and the other (in the other corner), an absolutely positioned img with z-index: -1;

This is great in IE6 + 7, and the text in the div is visible with both images acting as if they were backgrounds.

However, firefox doesn't display the absolutely positioned one unless I change the z-index to 0 or higher. This, of course, makes it cover up the text.

Any thoughts?

Thanks

I think Firefox is right in this. Why not make the text a div with z-index 2?

Oh my God! You might just be on to something there! So obvious!

- I can't believe I've been tearing my hair out for a week, fumbling with 'column container wrapper' negative-margined floated divs and conditional hidden-overflow comments with relatively positioned embedded spans with background images of transparent pngs blah blah blah..... All those fruitless shenanigans, and it only took a simple 'text-wrapper'!

I love you, mwaah!
(Ironic that your slogan is "beyond help"...Must be self-referential, for you've helped me no end!)

Thanks

BTW, I get that FF is 'right' in this, but grrrrr - this is one time I side with the Internet Enemy (IE)!
Pragmatism before W3C! :-)

Self-referential... Yes, very much so.

Ah, the good old 'column container wrapper' negative-margined floated divs and conditional hidden-overflow comments with relatively positioned embedded spans with background images of transparent pngs blah blah blah... Don't you just love CSS?

Anyway, glad I could help.

Well, I spoke to soon... (sigh)

You HAVE helped - a lot - BUT I've just tried it, and I'm up against a new, though (I hope) LESS invidious beast:

OK, this is what I've done, in a bit more detail (and note that I used a div to wrap ALL the center column content rather than simply positioning a paragraph as you suggested with a z-index higher than the pics because there would be too many individual elements that need a higher z-index and all of it was called by a php include):







and the CSS that may have some bearing on my NEW problem, is:



OK, you may be familiar with the A List Apart's supposed "Holy Grail" 3-column liquid layout. If not, doesn't matter, but the perculiar "margin-bottom: -20000px;" and so forth comes from that. Not relevant to my current problem, for sure.

The new beast is that all floated elements WITHIN the new text-wrapper that you suggested are covered by the 'pseudo background images' (in IE6 - haven't checked other browsers yet)

As a z-index can't be assigned to floats (correct?), I'm screwed.

Also, the new text-wrapper destroys the other realtively postioned elements within the wrapper, although those are easily fixed by readjusting values, no that's a mere annoyance.

Bottom line: the text-wrapper doesn't save me unless I can resolve the 'floats being covered' problem.

Confusingly, as the text-wrapper div has a z-index of 2, and the psseudo-background-images (which are NOT inside the wrapper) have a z-index of 0, it OUGHT to work, oughtn't it?
Note that both wrapper and pseudo-bckgr-imgs are contained by the div "centercolumn" with z-index 4, so, as far as I can see, there are no inheritance / "who's your daddy?" / stacking context problems.

Is this float behaviour correct, or an IE thang? Or have I just bodged something up?

Sorry for the long post, and thanks.

Oops - THAT'S what you said - ok, so I did implement your suggestion... please disregard that part of my last post at the beginning about the "positioned paragraph".

:-)

YEAH!

I've found it:

It seems I was dealing with the well-known IE z-index bug, where floated elements within a relatively positioned div have their z-index 're-set' to zero, regardless of the value they should have inherited. (This runs against the W3C specs to which all other browsers adhere in this matter).

My text-wrapper was z-index 2, and the images tat I wanted to appear as multiple background images were z-index 0, all of which being contained in the column div, but within the text-wrapper div were floated images.
Rather than those floated images having the same z-index as the text in the wrapper (2), IE re-set them to 0, thus making the pseudo background-images outside the text-wrapper div overlap them.

God, I LURVE Microsoft - life would be SO boring without them...

Solution (for the part of the code OUTSIDE the text-wrapper that positions the pseudo-bckgr-imgs absolutely):



That simple!

Now, FF, Opera, and IE 6 + 7 all behave the same!

Thanks for your input - I was only able to move on to the complete solution coz of your initial suggestion.
:-)

I'm having a little conversation with myself here, but I thought I should post the CORRECT solution to my problem (as my last post in this thread was jumping the gun and turned out not to work), just in case it's of use to anyone else:

My error in the last post was the attempt at some php in the middle of an IE conditional commet, which, of course, don't do nothin'! (duh!), but the following (which, this time, I've already checked!) does:



Phew!

Note that the peculiar syntax:



is simply the same as an ordinary "if not IE" conditional comment, but designed to pass validation.

Summary of problem + solution...
(again, just in case some poor bastard falls into the same quagmire and happend upon this while searching):

Quest:
You have a div which contains floats (say, images), and you want that div to have multiple backgrounds images. You also want this to work in all major modern browsers.

Difficulties:
1 Only Safari supports multiple backgrounds images as of 2007.
2 Opera and IE don't stick strictly to W3C guidelines regarding z-indexes, whereas Firefox DOES.
3 Moreover, IE has a separate z-index bug regarding floats.

Solution for IE + Opera:
Position your images and give them negative z-indexes, then put them in the div that contains your text or whatever else. Content is then visible over the img, even though it's not supposed to be. (Many argue that it's an advantageous use of negative z-indexes and should be standardised!) Floats work fine.
Unfortunately, the images will be invisible in FF.

Solution for FF:
Wrap all your text in a div WITHIN the main div (which we'll call "text-wrapper") and relatively position it (choose values of top: 0px; left: 0px; so it stays where you want it), then set the z-index of the text-wrapper to, say, 2. Positioned images are then placed in the main div but OUTSIDE the text-wrapper div, and given a z-index lower than the text-wrapper (say, 1).
Unfortunately, with IE, the positioned images will overlap the floats that are in the text-wrapper.

Cross-browser compatible solution:
Implement the above solution for FF (always a good idea to start with the most compliant browser!), then add conditional comments (see top of this post) so that only IE adds the negative z-index to the images. Now, FF is happy already, the floats appear correctly in IE, and the text-wrapper doesn't interfere with anything... almost...

Caviat: other relatively positioned elements within the text-wrapper will be knocked slightly out of place, but this is easily fixed by changing a few values.

I say again: "Phew"!

Matheson
jmathesonbayley(a`l`)hotmail D()`l` com

Looks like you did most of the work yourself while I was fast asleep. I saw your monologue this morning, and congrats! But I will not be reading all of this...

I miss sleep... (sigh)

I've just put together a little page with all the various 'fixes' lying around the internet for Matthew Levine's "The Holy Grail", along with a few tips of my own for succesfully implemeting it.

See http://myoozikmuse.blogspot.com/ for the complete updated template, which also incorporates some of the bug fixes in this thread.

Hope it's of use to somebody. :-)

(See www.mathesonbayley.com to see the template in action)

Matheson Bayley

I think you are my new best made - sometimes I can't see the wood for the trees and spend ages trying to fix something then someone like you comes along and solves my problem in 5 seconds!

Thank you!

You're more than welcome .

Although you fixed the problem, I'd just like to clarify (or maybe confuse?) some things. Firefox does *not* currently handle negative z-index's right. The CSS specification definitely allows for them. And, although it may not seem like it, Firefox does support displaying them.

The fix involves manually positioning the body element and giving it a z-index of 0. I'm not entirely sure why this works; it almost makes a very perversely logical sense that since objects need to be manually position to change their stacking order, the body element should be no different. But why you then have to explicitly give it a z-index of 0 for stuff to display below the content is beyond me... what's its default value (besides auto; whats the value where its getting it from?)