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

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

CSS Forum

    
overlay in internet explorer 6 not working
dupalo




msg:4426654
 8:19 pm on Mar 8, 2012 (gmt 0)

Hi there, I am having such an nightmare with this, and I have spent hours trying to fix it, but nothing, I just can't work out why it's not working. SO, the problem I am having on my website is with the overlay. If you view the website in any browser except IE6 you notice that there is a black overlay that covers the whole page when you click on a thumbnail image. I am trying to replicate this in IE6 but it just doesn't want to work, the overlay doesn't go where it should, it is actually just a line across the top of the page.
Here's the relevant code.
HTML:

<div class = "overlay">
</div><!-- END OF overlay -->

<div class = "[COLOR="rgb(160, 82, 45)"]full_images[/color]">
<div class = "image_div">
<img src = "images/animal_full_11.jpg" alt = "" id = "image1" style="display:none">
<img src = "images/animal_full_12.jpg" alt = "" id = "image2" style="display:none">
<img src = "images/animal_full_13.jpg" alt = "" id = "image3" style="display:none">
</div><!--END OF image_div -->
<div class = "[COLOR="rgb(160, 82, 45)"]close_button[/color]">
<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
</div><!-- END OF close_button -->
</div><!-- END OF full_images -->



CSS:

.overlay
{

display:none;
background-color:black;
position:relative;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
top:0;
bottom:0;
right:0;
left:0;
width:100%;
z-index:100;

}

.full_images
{

display:none;
background-color:black;
position:relative;
width:700px;
height:490px;
z-index:102;
left:50%;
top:50%;
margin:-650px 0 0 -350px;

}

.image_div
{

border:1px solid transparent;
width:660px;
height:450px;
margin:20px auto 0;
z-index:103;
/*no positioning so that I can centre the image*/
position:relative;
}

.close_button
{

position:absolute;
top:0;
right:0;
z-index = 104;

}


External script:

var $full_images;
var $close_button;
var $overlay;

$(function(){
$full_images = $(".full_images");
$close_button = $(".close_button");
$overlay = $(".overlay");
});

function change_images(image){
var $images = $("#" + image);

$overlay.hide().show();
$full_images.hide().show("slow");
$images.hide().fadeIn(1000);
$close_button.hide().show();

$close_button.unbind('click').click(function(){
$(this).hide();
$images.fadeOut("fast");
$full_images.hide("slow");
$overlay.hide("slow");

});


}


I have spent hours testing this but I don't know what it is preventing IE6 from displaying the overlay.
Any help much appreciated!
let me know if you require the full code
thanks

 

alt131




msg:4430576
 3:26 pm on Mar 18, 2012 (gmt 0)

Hi Dupalo, I think the reason you have had difficulty getting a response to your question is that the posted code isn't really showing the issue. The overlay will not cover the entire page because it has no height, and the thumbnails and the overlay have been set to display:none anyway. If the work is supposed to be done by javascript rather than css, unfortunately the posted script doesn't function, plus the errors in the html mean that the css doesn't apply without being adjusted.

It is possible to create these sorts of lightbox effects with css only - a search on stu nicholls at cssplay will bring up just one site that has been producing css-only and javascript assisted examples that will work as far back as ie6.

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