Hey all,

 

I have a Problem, please visit this page, and then, where you see the box with the artworks, scroll to the right and click on the last image ( Interior Design, 3D image ).

 

So, you see, I'm using a lightbox, but the scrollbar from the overflow is going trough the lightbox when I open an image ! How do I change that ? I want it to be behind.

 

Please help me !

 

Revs.

looks fine in ie 7 and firefox...

have you tried adding the z-index value as this will let you stack divs in order

 

#div{
  z-index:10; /* this value is from 0>100 with 100 being the top, 10 should sort it out */
}

looks fine in ie 7 and firefox...

 

I'm using Firefox but look at my attachement ( that's what it looks like to me ).

 

have you tried adding the z-index value as this will let you stack divs in order

 

#div{
  z-index:10; /* this value is from 0>100 with 100 being the top, 10 should sort it out */
}

 

I'm a bit of a noob, I don't know where to apply it, I have only 1 div for the box with the scrollbar btw, I applied it to that box, but it didn't change anything, I tried to valued 10 and 100.

i can only guess you are on a mac.. if that's the case try the z-index idea.. but it must be an operating system related bug and not a browser bug....

 

i know its not much of a consolation but it will look great in 85% of visitors browsers

 

you add z-index to the css.. for example

 

#yourdiv {
float:left;
width:69px;
height:39px;
z-index:10;
}

i can only guess you are on a mac.. if that's the case try the z-index idea.. but it must be an operating system related bug and not a browser bug....

 

i know its not much of a consolation but it will look great in 85% of visitors browsers

 

you add z-index to the css.. for example

 

#yourdiv {
float:left;
width:69px;
height:39px;
z-index:10;
}

 

Yea, as you can see on the screenshot, I'm on a mac.

 

Okay I will try that but I have absolutely no idea where to put it.

 

This is my code :

 

<div id="artworks">

<table>

<tr>

<td><a href="imgs/artworks/0001.png"><img src="imgs/artworks/mini/0001.png" alt="0001.png" /></a></td>

<td><a href="imgs/artworks/0005.png"><img src="imgs/artworks/mini/0005.png" alt="0005.png" /></a></td>

<td><a href="imgs/artworks/0003.png"><img src="imgs/artworks/mini/0003.png" alt="0003.png" /></a></td>

<td><a href="imgs/artworks/0007.png"><img src="imgs/artworks/mini/0007.png" alt="0007.png" /></a></td>

<td><a href="imgs/artworks/0002.png"><img src="imgs/artworks/mini/0002.png" alt="0002.png" /></a></td>

<td><a href="imgs/artworks/0004.jpg"><img src="imgs/artworks/mini/0004.png" alt="0004.jpg" /></a></td>

<td><a href="imgs/artworks/0006.png"><img src="imgs/artworks/mini/0006.png" alt="0006.png" /></a></td>

<td><a href="imgs/artworks/0008.png" rel="lightbox"><img src="imgs/artworks/mini/0008.png" alt="0008.png" /></a></td>

</tr>

</table>

</div>

 

#artworks {
width: 900px;
height: 119px;
border: 1px solid gray;
margin: auto;
overflow: auto;
background-color: #2F2F2F; 
}

 

Should I apply the z-index to the <td> ?

#artworks {
width: 900px;
height: 119px;
border: 1px solid gray;
margin: auto;
overflow: auto;
background-color: #2F2F2F;
z-index:10;
}

 

apply it there

Okay I did, but it's still not working and I still see the scrollbar trough the lightbox.

 

Oh and wait, I just noticed that this is just with Firefox, on Safari and Opera it works.

 

It also works without the z-index. But should I leave it ?

 

I think there's no other solution, it will not work on some browsers and I'll have to leave it like that.