Guber-X Posted March 31, 2013 Share Posted March 31, 2013 (edited) 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>'; } Edited March 31, 2013 by Guber-X Quote Link to comment https://forums.phpfreaks.com/topic/276360-lightbox-z-index-not-fully-working/ Share on other sites More sharing options...
Guber-X Posted March 31, 2013 Author Share Posted March 31, 2013 (edited) after some more testing, it only happens with the news divs below the div that has the photos uploaded to it Edited March 31, 2013 by Guber-X Quote Link to comment https://forums.phpfreaks.com/topic/276360-lightbox-z-index-not-fully-working/#findComment-1422157 Share on other sites More sharing options...
Guber-X Posted April 1, 2013 Author Share Posted April 1, 2013 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... Quote Link to comment https://forums.phpfreaks.com/topic/276360-lightbox-z-index-not-fully-working/#findComment-1422185 Share on other sites More sharing options...
Solution Guber-X Posted April 2, 2013 Author Solution Share Posted April 2, 2013 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... Quote Link to comment https://forums.phpfreaks.com/topic/276360-lightbox-z-index-not-fully-working/#findComment-1422385 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.