PDA

View Full Version : z-index issues in IE6



buggslife
Jul 11th, 2010, 11:33 PM
Hey, I have been working on my site and after getting to grips with some layout issues I am stuck on what seems to be a 'z-index' problem...

This is the page in development:

http://www.buggslife.com/development/gal_index11Julc.html

I am referring to the sets of images (buttons) down the left and also the larger ones in the main content which are from this sort of code:

/* ------underscore l refers to landscape orientation --------- */

.photo_l {
margin: 4px;
position: relative;
width: 145px;
height: 102px;
float: left;
font-weight:bold;
padding: 0px 0px 0px 0px;
z-index:2;
}
.photo_l img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
z-index: 5;
width: 100%;
height: 100%;
z-index: 4;
}

.photo_l a {
text-decoration: none;
}


.photo_l a:hover img {
border-color: #999;
}
.photo_l em {
width: 102px;
background: url("http://www.buggslife.com/galleries/images/bubble.gif") no-repeat;
padding: 3px 0px 0px 0px;
display: none;
position: absolute;
top: -15px;
left: 29px;
font-style: normal;
text-align: center;
text-transform: uppercase;
color: black;
z-index: 6;
}

.photo_l a {
text-decoration: none;
color: #000;
}
.photo_l a:hover em {
display: block;
}



/* begin gallery icons borders etc */

.white_rounded_l span {
width: 145px;
height: 102px;
position: absolute;
top: 5px;
left: 6px;
background: url("http://www.buggslife.com/galleries/round-corner_s.png") no-repeat;
z-index: 5;
}
.white_rounded_l img {
border: none;
padding: 5px 6px 6px;
background: url("http://www.buggslife.com/galleries/round-bg_s.gif") no-repeat;
z-index: 3;
}

I have played around changing the z-index for all parent divs but cannot get it to work in IE6 (it works fine in Firefox and Chrome - not tried on IE7 yet).

Can anyone help solve this irritating problem? As you'll see, I am inexperienced at all this and taught myself from scratch gradually in the past 6 months.

Thanks in advance.

abduraooft
Jul 12th, 2010, 09:29 AM
Fix the errors in your markup first, se http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.buggslife.com%2Fdevelopment%2Fgal_index11Julc.html

buggslife
Jul 12th, 2010, 10:20 AM
Ok - fixed them. They didn't relate to the problem (at least not on the left column) but good to clean up anyway.

Any z-index gurus out there?

abduraooft
Jul 12th, 2010, 10:43 AM
You don't really need any z-index there, if you properly use the CSS to make the columns. All that you need is a float:left; and some width on the left column and some adequate margin-left value on the second column. Refer http://bonrouge.com/2c-hf-fluid.php

buggslife
Jul 12th, 2010, 12:35 PM
This particular problem does not relate to layout...I will explain what I am aiming for:

The images in the left column are divs which have rounded corners (applied by a background image) and the images themselves have their corners rounded by pngs overlayed on top (as span backgrounds).

On hover another div image appears with text inside based at the top of each div.

In FF, recent IE and Chrome these display fine but in IE6 (and I assume 7 too) they are just grey boxes as if only the background (rounded corners image is showing through "round-bg_s.gif").

I hope this helps explain what I am aiming for and really appreciate any advice.

Have a look at my latest page:
http://www.buggslife.com/development/gal_index12Julb.html

(Note: I think I may have fixed the separate layout problems by adopting a different approach - will explain in other thread)

buggslife
Jul 13th, 2010, 08:59 PM
Still completely unable to get these things to display properly in IE6...

swieder
Jul 13th, 2010, 09:12 PM
IE is so far behind in development. If you said screw IE completely you could save yourself time and a lot memory by just using CSS3



-moz-border-radius: 10px;
-webkit-border-radius: 10px;


That should cover all mozilla and webkit browser.. firefox, safari, chrome, opera

buggslife
Jul 14th, 2010, 10:12 AM
Thanks - I am getting close to giving up now and will look at CSS3 on my next round of development.

I thought I had found the solution with this html>body hack that IE would not be able to read but, although it did work, the page is now not loading fully...

/* hack for IE - apply -ve z-index */

.white_rounded_l span {
width: 145px;
height: 102px;
position: absolute;
top: 5px;
left: 6px;
background: url("http://www.buggslife.com/galleries/round-corner_s.png") no-repeat;
z-index: -1;
}
.white_rounded_l img {
border: none;
padding: 5px 6px 6px;
background: url("http://www.buggslife.com/galleries/round-bg_s.gif") no-repeat;
z-index: -2;
}

/* code for other browsers..... */

html>body .white_rounded_l span {
width: 145px;
height: 102px;
position: absolute;
top: 5px;
left: 6px;
background: url("http://www.buggslife.com/galleries/round-corner_s.png") no-repeat;
z-index: 0;
}
html>body .white_rounded_l img {
border: none;
padding: 5px 6px 6px;
background: url("http://www.buggslife.com/galleries/round-bg_s.gif") no-repeat;
z-index: 0;
}

buggslife
Jul 15th, 2010, 05:45 PM
In case it helps anyone else I have managed to get around this particular problem by using browser specific stylesheets - not sure how good an idea that is but hopefully it will work for me.

Here's a good guide:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/