lightbox z-index not fully working...

[Guber-X]

okay, so I have gotten a lightbox effect working for when pictures are uploaded for a news post. the lightbox works and goes over the content from the main news DIV it is in, but if there are other news DIVs posted, they show up over the lightbox... it does the same thing between Chrome and FF. i have attached a PIC of the issue.

 

here is the code that is involved with all of this...

 

CSS:

// This is the style script for the NEWS DIV
.main {
	display: block;
	min-height: 100%;
	width: 680px;
	font-size: 13px;
	text-indent: 1em;
	text-shadow: #000 1px 1px 3px;
	
	background: #494949; /* Background for Internet Explorer 9 and older browsers */
	background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
	background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
	background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
	background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
	box-shadow: 5px 5px 5px #000;
	border: 2px solid #996600;
	border-radius: 15px;
	-moz-border-radius: 15px; /* FireFox */
	padding: 0 6px 6px 6px;
	margin: 0 0 20px 0;
	
	transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out; /* Firefox 4 */
	-webkit-transition: 0.5s ease-in-out; /* Safari and Chrome */
	-o-transition: 0.5s ease-in-out; /* Opera */
	position:relative;
	z-index:10;
}

// This is the style script for the LIGHTBOX
.black_overlay{ //the black transparent background
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:998;
	-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.white_content { //the content to the lightbox
	display: none;
	position: fixed;
	border-radius: 6px;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	;
	margin-top: -400px;
	z-index:999;
}

 

 

heres the HTML/PHP involved:

$query = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 10')
    or die('Query Failed: '.mysql_error());
while($row = mysql_fetch_array($query)){
	extract($row);
	$date = date('D M j, Y',strtotime($date));
	$new_id = $id;

	if($registered == 'yes' && $active == 'admin'){
		echo '<div class="panel right theme">';
		echo '<img src="images/gears.png" style="vertical-align: middle;"> Settings<br>';
		echo '<div class="admin_indent"><a href="#">Edit</a></div><div class="admin_indent"><a href="#">Delete</a></div>';
		echo '</div>';
	}
	echo '<div class="main">';
	echo '<div class="main-head"><a href="home.php?feed='.$id.'" target="_self">';
	echo $header .'</a> » <div class="ndate">'. $date .'</div>';
	echo '</div>';
	echo $news;
	if($upload=='true'){
		echo '<br />';
		echo '<div class="pic_slider">';
	        $photo_upload = mysql_query('SELECT * FROM m_photos WHERE post_id="'.$id.'"')
			or die('photo upload query failed: '.mysql_error());
		while($row = mysql_fetch_array($photo_upload)){
			extract($row);
			echo '<div class="inline" onclick="document.getElementById(\'light'.$id.'\').style.display=\'block\';document.getElementById(\'fade\').style.display=\'block\'"><img src="../ffyv2/files/thumb/'.$pic.'" height="200"/></div>';
			echo '<div id="light'.$id.'" class="white_content"><img class="images" src="../ffyv2/files/'.$pic.'" width="500" onclick="document.getElementById(\'light'.$id.'\').style.display=\'none\';document.getElementById(\'fade\').style.display=\'none\'"/></div>';
		}
		echo '<div id="fade" class="black_overlay"></div>';
		echo '</div>';
	}

[Guber-X]

after some more testing, it only happens with the news divs below the div that has the photos uploaded to it

[Guber-X]

okay, got it figured out so far, just not so well in FireFox and IE, works fine in Chrome... I set the z-index value of the news DIVs to "0" which seemed to work in chrome... 

[Guber-X]

well, finally got it all resolved between the 3 main browsers, IE FF and Chrome... i dont have safari installed so i dont know how it will react there but oh well...