Z-indexissue

[qim]

Hi I’m stuck on what appears to be a z-index problem in m page http://pintotours.net/Work/NewPage.html

There are two articles below the globe. As you press “read more” they expand and the width changes to cover a greater area. It works fine with the first on the left, but the other doe s not cover totally the boxes below. I’ve tried z-index just about everywhere and cannot see where the problem is.
I inherited the expansion script and cannot understand it, which adds to the problem.

Thank you

[RyanReese]

Yes on #content1{} you give it a z-index. You do not give #content2 the same gift . Just do something like this

#content2 {
position: absolute;
z-index: 1;
width: 60%;
background-color: #fff;
}

This next code segment below is ALREADY in your CSS file. Notice how close it is to what I gave to #content2. I only removed the left rule since it doesn’t need that.

#content1 {
position: absolute;
z-index: 1;
width: 60%;
left: 20px;
background-color: #fff;
}

[qim]

Hi Ryan

Brilliant!!!

I didn’t count the seconds it took you towork it out but they wre certainly less than the hours I toiled over it!

Many thanks

[RyanReese]

You just had a brain fart. We all have them. A second set of eyes are golden in this business. Glad I could help

[qim]

Hi

In fact I have brain diahrrea too! I have another teaser. Content 2 does not leave a line in between paragraphs like #content1 or #content0. I can’t see any code anywhere to control that. I would have thought the <p> and </p> would do the trick as it does in the other texts

[qim]

Hi

Please ignore above. I found the problem.

Thanks

[RyanReese]

You have a rule, #content1 p{} which has margin:16px!important. That allows the space between paragraphs. Again, #content2 doesn’t have anything like this so it doesn’t get spacing. It takes on the margin:0; rule from “#expansion div p{}”…

I’d remove that !important rule since I don’t know why you have it. Take that one #content1 p{} rule and turn it into this

#fiftypcl #content1 p{margin:16px;}

Then add this rule in for #content2 element.

#fiftypcr #content2 p{margin:16px;}

[RyanReese]

Good job. You found it just as I did . I wouldn’t use !important in this case. Bit unnecessary.

[qim]

Thanks