Z-index ie8

[lostrisq]

Well.... I am completely lost.

I have made a design with floating elements, stacked on top of each other.
It shows well in ie7 but ie8 ignores my z-index.

I use a negative margin for the content element since it has to go under the left div and on top content has to be underneath the slideshow.

z-index .slideshow 300
z-index .left 200
z-index .content 100

All elements have relative positioning and a float.

I have tried giving header, content_container .mod_navigation a higher z-index, but this also does not work.

http://www.pukt.nl/blumberg

I don't think I will ever understand explorer. This has taken up almost my whole day fiddling around. Grrrrr, little bit frustrated.

(Just had a look again in ie8 and it is not even consistent???????? sometimes it shows the menu in the following pages, sometimes it does not? I think I can better go out and have a drink. :-))

[ramjet]

When you go for that drink, put it on Bill Gates tab ... it should be his shout
(sorry, no solution from me)

[lostrisq]

I should, I really should.

Still going at it.... It is driving me crazy. How can I ever go to sleep with something like this in my head!
I am sure it will be a mistake from my side in the end, mixed up with some explorer madness.
But still....

[lostrisq]

And what annoys me most; First we had to deal with ie6, then with ie6 & ie7. And now there's three of them!! :shock:

[ramjet]

Do you use a reset css. I don't know how effective this is, or even where I got it from but here it is just in case....

/* Style sheet reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi g,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,s mall,strike,strong,sub,sup,tt,var,b,u,i,center,dl, dt,dd,ol{margin:0;padding:0;vertical-align:baseline;border:0;font-size:100%;outline: 0;background: transparent;}
body{line-height:1;}
ol,ul{list-style: none;}
blockquote,q{quotes: none;}
blockquote:before,blockquote:after,q:before,q:afte r{content: '';content: none;}
:focus{outline: 0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing: 0;}

The forum doesn't allow css upload sorry - also its not all visible in the quote window, but copy/paste works

[lostrisq]

I did, but i chucked it to see it that would work. (it didn't)
forgot to place it back.

Can you (or anybody else) do me a favor and have a look in ie8 http://www.pukt.nl/blumberg

If you look at "PRODUCTEN" it shows two views randomly. One with and one without the red line on the top.
Also if it does show the red line it is stretched. The bottom image is the homepage on which the background shows properly.

[ramjet]

I haven't got ie8, but heres what I see in ie7 on your homepage... [attachment=1:12panezd]ie7.jpg[/attachment:12panezd]
and on production..... [attachment=0:12panezd]production ie7.jpg[/attachment:12panezd]

http://browsershots.org/ is a good one to use to see display in various browsers.

[mechaflash]

One thing I convinced my boss on, IE6 is worthless trying to work with especially in CSS... I'm sure Thyon would agree :lol: . Statistics show that over the last year IE6 has dropped to only 6% usage worldwide and 4% usage in the United States alone, with IE8 and newer Firefox versions leading the way. IE6 causes so many headaches... at least it gives you one less thing to style for.

[mechaflash]

Also try this

/* Fix for IE and it's z-index issue */
#header .inside {
   z-index: 1;
}

[Ruud]

It reminds me of a bug which is actually an IE6 and 7 quirk; these reset the z-index stack for elements within positioned elements. Try setting a z-index for the #content-bg; this is at the same level as the #left.

If that won't work remove all css and reintroduce only the parts you need to get this done. If that won't work: the website seems perfectly suitable for absolute positioning. I see no real reason to use floats for the header and left menu.


On a side note; I dislike having to work with 5-6 browsers. But IE8 isn't all that bad and Firefox isn't right all the time you know. The other two hardly cause any problems. IE7 has some minor troubles, and IE6 is just an oldie which I usually deal with last. Add a conditional stylesheet that is only used by IE6 and solve the problems one by one; typically 5-20 minutes. Some things require some javascript like a hover event on non anchor elements, but that's something I have on a shelf ready to be put in..

[lostrisq]

Well.... to my opionion, explorer is bad. There is ALWAYS something different. Something annoying. Something time consuming.

The problem has something to do with transparant png's. (I think)
When i make the left div a .jpg, z-index works fine. When i make it a png; no z-index anymore.

Got sick of it. Worked around by using gif's where possible.

And indeed, when using aboslute positioning, the z-index works perfectly.
But I am not a fan of absolute posiotioning, bit to static to my taste. Where do I leave my footer for instance?

Anywayz.... my problem is solved. For now.

But if anybody can tell me something about transparant .png's together with z-index in explorer, I would be delighted!

[lostrisq]

oh... and color difference.

Why is there always a slight color difference in explorer bg images opposed to other browsers?

Yes, explorer is bad. ie8 may not be as bad as ie6, but still a pain in the bum.

[ramjet]

please note the screenshots i posted were IE7 (not 6), and still look like that.

[lostrisq]

You're scaring me. Have you emptied your cache? It should be alright now......

in ie7 and ie8

[Ruud]

...
The problem has something to do with transparant png's. (I think)
When i make the left div a .jpg, z-index works fine. When i make it a png; no z-index anymore.
...

That sounds like one fun bug, but png support was bad until IE8 so I'll buy into it being the culprit!

...
And indeed, when using aboslute positioning, the z-index works perfectly.
But I am not a fan of absolute posiotioning, bit to static to my taste. Where do I leave my footer for instance?
...

I didn't mean everything should be positioned absolute. Position the headers absolute and the content relative for example. The footer will be pushed down by the contents. In your specific case it would definitely work and give the same result when finished.
"Absolute" positioning should be renamed I think; it is always relative to the first positioned ancestor. Nothing absolute about it. But that does make it more flexible because if it truly was absolute I would agree with your statement.

[ramjet]

IE7 - Production is ok, but what happens now is that all your top links on all pages jump considerably to the left on mouseover.
Also your homepage is ok on load, but once the slider starts it reverts to having the dotted picture come to the fore (see my previous screencap) .
Also your contact page looks like this:[attachment=0:3jlyrvxk]contact.jpg[/attachment:3jlyrvxk]

In page layouts, make sure your reset css if first (little green arrows).. I believe this makes a difference.
Also add border:0px; to your reset css - to reset all IE borders .... this should stop the links jumping (it worked for me once).

EDIT: i see border:0; is in your reset.css - just try getting this stylesheet to the top then.

[Ruud]

My IE7 does not display correctly; the menu is not visible (below the background of the main).

IE6 is worse (see image attached). The menu also disappears after you seem to run a png fix?

[lostrisq]

Thank you so much for all your feedback! Checking with only browsershots is not very convenient. I've downloaded a standalone version of ie7.

I think now, finally, i managed to solve it. Or at least, properly work around it.
Still so strange, this png thing what's happening. Never encountered it before.

[Ruud]

I'm not sure why, but IE8 doesn't display the left-bg.png entirely correct. Probably the png fix js because without the image does load correctly!! It doesn't make the image 100% transparent...