fixing pics position for all browsers in CSS image gallery

[Norfolk]

The css for the image hover gallery (enlargement when hover over thumbnail) works great, but my problem is when I set the position of the enlarged images (left & top) they are good only in IE, and only on my computer.
But in the other browsers and on some customers' pcs they don’t show up on the right place.
Is there a code addition to show them on a fix/correct place in all browsers?
(website for example: http://www.shelpetcavaliers.com).
Thanks for any good advice!

[davelf]

set the right position base on firefox, if firefox is ok, safari and chrome usually don't have problem.
Next use different css to fix the IE problem.



<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

[Norfolk]

[QUOTE=davelf;255125]set the right position base on firefox, if firefox is ok, safari and chrome usually don't have problem.
Next use different css to fix the IE problem.


Thanks for the reply. So do I have to set different x and z values before the code you gave for IE, or just quote the code?

[molendijk]

All modern browsers give the same result for something like the following:
<div style="position:absolute; left:50px; top: 50px; right:50px; bottom:50px"></div>
I hope this helps.
===
Arie Molendijk.

[Norfolk]

All modern browsers give the same result for something like the following:
<div style="position:absolute; left:50px; top: 50px; right:50px; bottom:50px"></div>
I hope this helps.
===
Arie Molendijk.

Thank you, Arie - that certainly resolves the problem when the browser window is open to full size. And it works with all browsers - you're right!

However, I've still got a second problem. If you open the browser window to a smaller display, the enlarged pic slides across other content, so is no longer in the right position.
Is there any way to have it
a) absolutely positioned for all browsers and
b) floating when the browser window has a smaller size?

Thanks a lot,
Susanne

[MJH]

See, my code here (http://www.javascript-demos.com/1/single_row_thumbs/Single_Row_Thumb_Demo.html)

Single Row Thumbnail Rollover Galleries

* No coding needed - just create the markup for each gallery, the code does the rest
* Accessible - your visitors who have JavaScript disabled will still be able to use every gallery
* Tested in IE and Firefox
* Maintains the aspect ratio of the images, both thumbnail and "full size"
* You may choose a reasonable, overall width for the galleries
* mouseover a thumbnail to swap the "full size" image
* mouseover the "full-size" to display an opaque caption overlay
* Maximum 15 galleries per page
* Maximum 8 images per gallery
* A ...config.js file has one variable to customize
* No HTML names or ids are used, greatly reducing the chance for conflict with your existing documents

Great for:

* Real Estate Agents, Brokers & Homesellers
* Travel agents
* Teachers
* Photographers
* Bloggers
* Retailers and Ebay sellers

Just copy the files for yourself

[molendijk]

Suzanne, maybe yould could use percentages instead of pixels, like:
<div style="position: absolute; left: 10%; right: 10%; top: 10%; bottom: 10%"></div>
Or use bigger pixel values.
===
Arie.

[davelf]

if you talking about "open in the browser window to a smaller display", this is totally a different question.
Your main problem is cross browser in IE.
If you consider the window too, you should develop it using framework.
Like this one for example : http://lessframework.com/

I always have problem in cross browser too, especially in IE. I hope there's a Jquery or something that can make IE layout more friendly or at least help us to integrate it. Is there something like that???

[Norfolk]

Thanks MJH, for the nice code - I'll definitely give that a try. Of course, that's javascript instead of css, but if it does the job?

Thanks, Molendijk, for the excellent tip - that sounds more promising than using pixels, indeed, and I'll try that, too

Thanks, Davelf, for the interesting hint re "lessframework". That also sounds very good, if possibly a bit more coding.

Great to get such usefull feedback - thanks everybody!