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/cs...p-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-...ly-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?