homepage Welcome to WebmasterWorld Guest from 54.225.57.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
z-index and div overlap issues
buggslife




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

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:
[buggslife.com...]

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;
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;
}


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?

 

buggslife




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

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

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

buggslife




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

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

brokenbynubs




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved