CSS Popup Image Viewer - image is mostly hidden in IE

[BrianNY]

Hi. I love the CSS Popup Image Viewer that I was able to implement on my site-to-be. It was a great step forward in my development effort, and I appreciate the effort of this Dynamic Drive site to share helpful code and ideas.

While the popup image looks fabulous in FF and Chrome (placed exactly where I want it), unfortunately, in IE the image is hidden under other sections of my site. Small pieces of the image do appear between these sections, so I know it's there but covered.

Since I do not have my site up yet (I am working with WampServer on my laptop), I cannot point you to it, unfortunately.

I tried tinkering with "z-index: 60;" for example, but nothing seems to work. The original tutorial from DD with the pictures of the tree, ocean and sushi work fine with all three browsers, and I changed little in implementing it into my site's CSS file, so I am wondering if there is something about my other sections .. are they defined in a superceding statement that cause them to block the popup? Remember that the image can be seen "between the cracks" of these other sections, and atop one small bar-type section.

I looked through the forum, and some entries hint at this problem, but I haven't found one that is identical. Am I the only one with an IE issue in this matter?

Thanks a lot.

[Snookerman]

For z-index to work, the element must be positioned. Try this:

z-index: 60;
position: relative;

If that doesn't work, please post a link to the page on your site or attach your code so we can check it out and help you.

Good luck!

[BrianNY]

Snookerman,

Thank you so much for replying. I have been trying different things and searching for discussions on this, but have gotten nowhere.

Also, I tried what you said, position relative and z-index, but it doesn't seem to make a difference.

To put below code in context, I have a bunch of navigation squares for which I would like to have a popup for each at hover, so user can know what he/she will find in that link. I cannot tell you how great it looks in FF and Chrome. It is soooo frustrating that IE hides it behind most other content (but not all).

I could attach a screen shots of both FF and IE views as attachments to an email.

Here, then, Snooker, are the two parts of my CSS which pertain ..

      /*Credits: Dynamic Drive CSS Library */
      /*URL: http://www.dynamicdrive.com/style/ */
		
		.thumbnail{
			position: relative;
			z-index: 0;
			}
		
		.thumbnail:hover{
			background-color: transparent;
			z-index: 50;
			}

	
		.thumbnail span{ /*CSS for enlarged image .. NOT SIZE */
			position: absolute;
			background-color: transparent;
			padding: 5px;
			left: -1000px;
			/* border: 1px dashed gray;  */
			visibility: hidden; 
			color: black;
			text-decoration: none;
			}
		
		.thumbnail:hover span{ /*CSS for enlarged image on hover*/
			visibility: visible;
			top: 25px;    /* enlarged image should offset vertically */
			left: -120px;  /* enlarged img should offset horizontally */
		 	z-index: 60; 
			}		
		

		.thumbnail span img{ /*CSS for enlarged image*/
			border-width: 0;
			padding: 1px;
			width: 200px;      /* THIS IS THE SIZE CONTROL */
			height: 350px;
			}

ALSO THESE DIVs ..

     #nav-squares a {
            text-decoration: none;
            font-weight: bold;
            color: darkred;
            display: block;
            text-align: center;
            line-height: 250%;
            }

     #nav-squares a:hover {
            background-color: white;
            color: darkred;
            font-weight: 900;
            text-decoration: underline;
            border: lightcoral;  
            }

     #nav-square-07 {
	    position: absolute;
            width: 148px;
            height: 38px;
	    background-color: #CCFFCC;
            top: 45px;
            left: 305px;
            }

/*  ==   ==   ==   ==   ==   ==   ==   */

AND HERE IS THE REFERENCE IN MY PHP/HTML ..

   <div id="nav-square-07">
          <a class="thumbnail" href="#thumb">Contractors<span>
          <img src="img/catgy1c.png" /><br /></span></a>
          </div>

THANKS AGAIN !

[BrianNY]

Hi,

After spending 2 full days looking, asking, trying different things, I am forced to throw in the white flag to IE. Something that works so well in all other browsers just wouldn't work in IE.

The popup image gets mostly hidden by the content section entries, no mater what I do to change that.

I might keep the CSS hover popup image (from this site's CSS Popup Image Viewer tutorial) with the other browsers, and only use JS when the user has IE, but that may be more trouble than it's worth.

If anyone has any suggestions, I am still open to revisiting the issue .. I'll try anything. Email me directly if you wish: brian.saratoga@gmail.com If we were to email, I could attach screen shots of what is happening.

Also, maybe I will revisit it in this forum when the site is up, so I can point people to it as a sample of what is happening.

Thanks for caring. Brian in NY