Member Avatar for Violet_82

Hi there,
I am having some problems with my site displaying correctly in IE6. In particular if you have a look at this page in IE6 the script doesn't seem to be working the way it should, and I think it might be a problem with the css and the z-index.
Here's the script code:

...
  <script type="text/javascript">
		
		function change_image(image)
		{			
					$(".overlay").show();
					$(".box").show("slow");
					$("#" + image).fadeIn(1000);
					$(".close_button").show();			
				
				
				$(".close_button").click(function() {
					$(this).hide();
					 $("#" + image).fadeOut("fast");
					$(".box").hide("slow");
					$(".overlay").hide("slow");
				});	
		}
		
		
		</script>

...

and the related html

...
 <div class="boxes_wrapper">

                
                	<div class="thumb_container">
                
                        <div class="thumbnail">  
                        	<a href="javascript:void(0);" class="full_image"><img src="images/water_thumb_1.jpg" alt="" style="border:0" onClick="change_image('big_image_1')"></a>
                        </div><!-- END OF thumbnail 1-->
                    
                        <div class="thumbnail">    
                        	<a href="javascript:void(0);" class="full_image"><img src="images/water_thumb_2.jpg" alt="" style="border:0" onClick="change_image('big_image_2')"></a>
                        </div><!-- END OF thumbnail 2-->

...

and the CSS bit for the script to work:

...
/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
	display:none;
	background:#cf1dbb;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	position:fixed;
	z-index:100;	
}

.box
{
	display:none;
	background-color:black;
	width:660px;
	height:450px;
	position:fixed;
	left:50%;
	margin: 0 0 0 -330px; /* to centre a fixed div jus give it left 50% and move it back half of its width*/
	top:10%;
	z-index:101;
}

.standalone_image
{
		
		/*background:url(../images/water_full_3.jpg) no-repeat;*/
		position:absolute;
		z-index:101;
		width:602px;
		height:399px;
		top:25.5px;
		bottom:25.5px
		left:29px;
		right:29px;
		/*border:1px solid red;*/
	
}

.close_button
{	
	display:none;
	left:94%;	
	/*background:url(../images/close_button.png);*/
	width:40px;
	height:40px;
	position:absolute;
	z-index:102;
}
...

In IE6 when I click on a thumbnail the big image comes up but no close button therefore that messes up everything because if you click on another thumbnail another picture comes up and so on.
Now I was wondering whether the best way to sort this is to create a conditional css just for IE6. Also, not quite sure if IE6 isn't fully compatible with the z-index? COuldn't find that much on google
any suggestion will be much appreciated as usual
thanks a lot

  • 2 Contributors
  • 2 Replies
  • 186 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Brief, practical summary for (and anyone hitting the same IE6 behavior): the symptom (popup appears but the close control does not, and subsequent clicks stack more popups) matches three well-known IE6 quirks — lack of true support for position:fixed, nonstandard stacking-context/z-index behavior, and the browser’s legacy “hasLayout” model that changes how filters/opacity and stacking work. (stackoverflow.com)

A short diagnostic checklist (fast wins, in order):

  • Validate the stylesheet for syntax errors (missing semicolons or broken rules can cause older parsers to skip the rest of a rule block). (developer.mozilla.org)
  • Confirm the close control is inside the same popup DOM node (or that its positioned ancestor has the correct z-index). In IE6 z-index is resolved per stacking context, so children don’t “escape” a parent stacking context. (developer.mozilla.org)
  • Avoid rebinding the close handler inside the show function (bind it once on load). Repeated bindings create strange behaviour after multiple opens.
  • Force IE’s layout where needed (e.g. use an IE-only trigger such as zoom:1) so filters/opacities and stacking behave predictably. (learn.microsoft.com)

Practical fixes (minimal, testable):

  • Provide an IE6-only stylesheet (conditional comments) that replaces position:fixed with position:absolute and keeps the modal positioned relative to the document (or use a tiny script to reposition on scroll). Example IE6-only CSS pattern:
<!--[if lte IE 6]>
<style>
/* emulate fixed in IE6 */
.modal-overlay-ie6 { position:absolute; top:0; left:0; width:100%; height:100%; z-index:9000; zoom:1; }
.modal-window-ie6  { position:absolute; left:50%; top:10%; margin-left:-330px; z-index:9001; zoom:1; }
</style>
<![endif]-->

For guidance on this fallback approach see the IE6 position-fixed workarounds. (stackoverflow.com)

  • Ensure the close control has the highest stacking level inside the popup (explicit z-index on its positioned parent), and bind its click handler once (on DOM ready) rather than inside the show routine.

Finally, ’s remark about effort vs. audience is sound: if IE6 support is just for a CV demonstration, apply a small, well-documented conditional fix (as above) and note it in the project description rather than spending large amounts of time chasing every edge-case.

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

Honestly, find out what percentage of your users actually use IE6, then determine if you should even try to make it work for IE6 at all.

Let's say you spend 20 hours trying to get this to work for 1% of your users, is this beneficial considering you could have been working on something else for 20 hours that benefits 99% of your other users.

There are times when you aren't going to be able to please everyone, pick your battles and focus on the majority first.

This is my 2 cents.

commented: This is good advice. +2
Member Avatar for Violet_82

Hi stbuchok,
yes I have considered this. There aren't many people probably looking at that in IE6 but there are still some, especially people at work (90% of my coworkers still have IE6 installed for the sake of argument). I am saying this because I would like to include this site on my cv and it will look good if I can prove that I have done some efforts to make it compatible with IE6. DOn't get me wrong, I tthing you are right and under normal circumstances I wouldn't really worry too much, but I would like to make sure that the website is at least usable in IE6 and as things stand at teh moment it is not.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.