Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

z-index and div overlap issues



9:54 pm on Jul 11, 2010 (gmt 0)

5+ Year Member

Hey, after reading several posts here by SuzyUK I think I have solved some layout problems I was struggling with in IE6.

However, I still have two issues.

1) z-index in IE6
2) layout overlaps from mid column div over left div

Here is my development page:

1) The images/buttons on the left and in the main content do not appear in IE6 and I have tried various changes to the z-index including their parent divs.

PLease can anyone help on this?

The images in question are based on the code below (works ok in Chrome and FF):

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

.photo_l {
margin: 4px;
position: relative;
width: 145px;
height: 102px;
float: left;
padding: 0px 0px 0px 0px;
.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;

2) On smaller res screens or if you reduce the browser window size the col_mid overlaps the colleft...I cannot figure out why.
Any clues?


11:14 am on Jul 12, 2010 (gmt 0)

5+ Year Member

I seem (fingers crossed) to have 'fixed' the layout issue 2).

However, I am stuck with the z-index problem...any ideas?


7:01 pm on Jul 13, 2010 (gmt 0)

5+ Year Member

Still really stuck on the z-index - any advice anyone?


2:58 pm on Jul 19, 2010 (gmt 0)

5+ Year Member

Are you using any javascript for those images? On my IE6 I see a quick blink of images on the page before I get a JS error and they go away.

Featured Threads

Hot Threads This Week

Hot Threads This Month