Positioning of CSS Popup Image Viewer script in Firefox

[michelle1977]

I am using the CSS Popup Image Viewer script in IE7 and it's working brilliantly. However, in Firefox the image appears at the bottom of the thumbnail. How do I edit the postitioning so it looks fine in all browsers?

The CSS I'm talking about can be found here: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer

Thanks for your help.

[Beverleyh]

IE7/IE6 and Opera are the "black sheep" here as IE8, IE9, Firefox, Chrome and Safari all show the larger pic displaying towards the bottom of the thumbnail, give or take a few pixels in overlap.

You could create a IE7 (and lower) specific stylesheet http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ and tinker with the top value, here - maybe set it to top: 20px to start:

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

[michelle1977]

Thanks Beverleyh, I'll give that a go and see if I can maybe position it so it's better viewable in all browsers. Too bad there isn't a solution to get it in the same place in every one.

Regarding the same script - do you happen to know if it's possible to adapt it so it functions in IE8?

[Beverleyh]

The demo here appears to work fine in IE8 - I was only on it briefly though so maybe I missed something.

What's not working exactly?

There might also be another conflicting script on your site that's affecting functionality that isn't evident when used alone - can you post a link to your page so we can see the problem?

[michelle1977]

I had to re-install IE8 since it kept freezing so I went back to IE7 so I can't see how it's behaving right now.

In my IE8, the pop up appeared under the thumbnail image, instead of on top. You can view it here: http://www.lettersets.com

[Beverleyh]

That's actually about right.

If I were you, I'd tweek the main stylesheet to place the larger popup where you want (use negative numbers if necessary) and then create an IE7/6 specific stylesheet with different values to mimic the same effect.

This might be a better way of working in the future; do your initial styling/building in Firefox but then check IE8 then IE7 then IE6 (backwards) and create specific stylesheets to suit each (if you need to). Have you got your head around how to serve stylesheets to specific IE browsers yet? Let me know if you need any help.

BTW - you can check older versions of IE using free IETester: http://www.my-debugbar.com/wiki/IETester/HomePage

Last off - I really like your letterset website - I can tell with the amount of pink girlyness that you are on my wavelength :)

[michelle1977]

Hi Beverly,

Thanks for your thorough and clear reply! It's not often that you find somebody so helpful in a forum. I often get short one liners as a reply which still leave me, as a relative novice, in the dark.

I've been webdesigning for a few years now, but am teaching myself along the way which means I still have gaps in some of the basic skills...

That makes a lot of sense, designing for Firefox and then checking IE and the rest afterwards. I haven't yet tried to make different stylesheets for different browsers (I didn't know that was possible) but that should solve a lot.

My next question was going to be how I cross check my website in different IE versions, but you already beat me to that, great!

I'll be busy for the next couple of days, playing with my new laptop (yay!) but I'll definitely get back to you if I need more help.

From one girly girl to another, :)

Michelle

[Beverleyh]

No problem Michelle,

I'm self-taught too so I appreciate the (sometimes) rocky road you tread.

Have fun with the laptop - I enjoy getting new toys too - my latest is a Blackberry 9700 Bold :)

Let us know if you need any further help.

[michelle1977]

A Blackberry? I've managed to resist temptation so far... I'm afraid I would be online even more :)

I'm playing around with the IE only stylesheets and have come up with the following:


<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="layout/css_ie7.css" /><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="layout/css.css" /><![endif]-->
<!--[if !IE]><link rel="stylesheet" type="text/css" href="layout/css.css" /><![endif]-->

So basically I then have 1 stylesheet for IE8&up and Firefox (etc.) and 1 stylesheet for IE7 and below. Is there a shorter way I can code that?

Also, is it possible to put this in a .php file and put a php reference between the head tags? That would make it easier if I need to edit it in the future.

Thanks for your help.

[michelle1977]

Me again :) I'm playing around with the top value as suggested above and it does indeed shift where I want it to, in both IE8 and Firefox. In Firefox it works perfectly, but in IE8 the pop up images appears under the original thumbnail, instead of on top of it. Any ideas on how to tweak the code that it "surfaces"? I guess that would mean 3 stylesheets, 1 for IE7 and under, 1 for IE8 and up and 1 for Firefox?

[Beverleyh]

Yep - if placement is different in each browser and you want pixel-perfect positioning, you'll need ;

1. Your main stylesheet - targets Firefox and other "more compliant" browsers,

2. an IE8 and above stylesheet - "gt" mean greater than;

<!--[if gt IE 7]>
...CSS for IE8 and above...
<![endif]-->

3. an IE7 stylesheet;

<!--[if IE 7]>
...CSS for7...
<![endif]-->

4. and an IE6 and below stylesheet - "lt" means less than;

<!--[if lt IE 7]>
...CSS for IE6 and lower...
<![endif]-->

[michelle1977]

Hi Beverly,

Thanks. Just one more question left - do I need to specify the main stylesheet as well with a code (for instance, do I need to mark is as "non IE"or "Firefox" ) or do I just leave that as it is and add the lines for the IE stylesheets below?

And do you happen to have a solution for the following:


Me again I'm playing around with the top value as suggested above and it does indeed shift where I want it to, in both IE8 and Firefox. In Firefox it works perfectly, but in IE8 the pop up images appears under the original thumbnail, instead of on top of it. Any ideas on how to tweak the code that it "surfaces"? I guess that would mean 3 stylesheets, 1 for IE7 and under, 1 for IE8 and up and 1 for Firefox?

Thanks again for your help.

[Beverleyh]

Hi again,

No, the main stylesheet just goes in as is - you don't need to target any particular browser (in fact, you WANT all other browsers to see it) so no fancy code needed there.

For the positioning thing (forgive me now cos I'm on my phone) do you mean that the enlargement lays under the thumb like a 3D layered effect? If that's the case, you can try putting z-index:1000; (or a bigger number if required) in the CSS for the enlargement. That should bring it right to the front :)

[Beverleyh]

BTW - the z-index:1000; value can be put in the main stylesheet (it shouldn't have a negative effect on anything else) and you should order you stylesheets as follows;

Main stylesheet,
IE8 and above stylesheet,
IE7 stylesheet,
IE6 and below stylesheet,

Hope that helps

[michelle1977]

Hi Beverley,

I played around a bit with the top values of the script and kept checking the result in the IE tester, which is an amazingly useful tool, thanks for the tip. I managed to place the pop up where it looks fine in all browsers and best in IE8 and Firefox. In IE7 it's slightly higher than I might have chosen, but at least it's functional now, so I chose to go with this solution, it seemed easier than making different stylesheets. I'll certainly keep it in mind though for the future when I run into a browser specific coding issue, which I'm sure will happen again at some point :)

The z-index:1000; worked like a charm and the pop-up are now on top of the images as they should be.

Thanks again for your great help!

Michelle

[Illo]

Hi Beverleyh,
I’ve a question about popup image viewer control to be showed always in the screen. In that example page that Michelle posted (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer) the popup will not be visible if that thumb photo be close to footer. I mean something like this on elegant theme: http://www.elegantthemes.com/preview/Lumin/
How can I adjust it to be relative to the browser window. I mean something like istockphoto.com search result popups that popups are always fully visible if there will be no enough space at the bottom.
The lumin theme has CSS codes:


div#footer-widget-area { background: #2d3134 url(images/footer-widget-bg.png) repeat-x top left; padding: 40px 0px 0px; }
div#footer-widget-area div#recent-projects { position: relative; padding-bottom: 40px; }
div#footer-widget-area div#recent-projects h3 { font-family: Georgia, serif; font-size: 40px; margin-bottom: 27px; }
div.project-popup { display: none; position: absolute; top: -20px; left: -141px; padding: 11px 0px 0px 11px; z-index: 1000 !important; }
div.project-popup span { background: url(images/overlay-popup.png) no-repeat; position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 406px; height: 247px; }
div.project-popup a { display: block; }

I'm really sorry because of my bad English. Thanks :)

[Beverleyh]

In that example page that Michelle posted (http://www.dynamicdrive.com/style/cs...p-image-viewer) the popup will not be visible if that thumb photo be close to footer.
The popup image WILL be visible - the height of the enlarged popup image is added to the bottom of the page if no other HTML markup is present (below the thumb) to add the extra space for it.

In the case of this script, its not desirable to have the image popup totally in the middle of the screen. Look at it this way, the enlarged popup remains on screen while your cursor is on it or its thumb. If you had the thumbs in the middle of the screen, and then the enlargement appear in the middle and over the top of everything, you wouldnt be able to move away from it to make it hide and then point your cursor on something else. If you have several thumbs closeby, you essentially create a maze where a user would have to guide their mouse very carefully between the gaps in the thumbnail grid otherwise risk have a popup leap out at them, cover all the other thumbs and then ruin their browsing experience.
Thats going to send them elsewhere due to frustration.

If you want an image to popup centered, you should look for another script in the DD library that produces a popup onclick instead of onhover. http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm is a good one.

[Illo]

Thank you Beverleyh :)

[michelle1977]

Hi Beverly,

It's me again, Michelle, with a follow up question regarding the thumbnail hover script.

On my website www.lettersets.com in IE8 the pop-up is appearing under the image next to it again, instead of on top of it. I am using exactly the same script as on my other website www.leukpostpapier.nl but somehow it's behaving differently. Can you see what I'm overlooking?

Thanks in advance again for your help!

Michelle