Code help for different screen resolutions

[Bern]

I created a website for a friend who is a photographer. It's all hand coded
using XHTML and CSS.

I created an image gallery which is just basically a series of thumbnails with the larger image on top (using <span> ).

My problem is that depending on what resolution the visitor is using on their screen depends on the accuracy of positioning of the larger image above the thumbnails.

The tag I'm using in CSS is simply:-

#gallerycontainer{height: 33em; margin:auto;}

.thumbnail img{border: none; margin: 30em 0.2em 0em 0em;}

.thumbnail:hover{background-color: transparent;}

.thumbnail:hover img{border: none;}


/*CSS for enlarged image*/

.thumbnail span{ position: absolute;
visibility: hidden;
top: 5em;
left: 22%;
margin: auto:}

/*CSS for enlarged image*/

.thumbnail span img{border-width: 0;
padding: 0 0 0 0;
margin: auto;}

/*CSS for enlarged image*/

/*position where enlarged image should offset horizontally */

.thumbnail:hover span{visibility: visible;
top: 5em;
left: 22%;
margin: auto;}



So it's the "left:22%" for the hover.span and the thumbnail span that is giving me grief.
In this state the images look fine on a screen resolution of 1024 x 768, but anything higher and the larger image moves to the left (out of line that is).

So I was wondering is there a way I can apply Javascript so that it recognises what the resolution of the visitor's screen is set at and chooses the correct positioning of the span image to suit?

I'm a total newb at Javascript so I'd really appreciate any help.

Thanks

 

[Bern]

Never mind, I again have worked out another way to create an image gallery using Javascript which means I won't have to worry about this issue.