Ciao a tutti.

sto realizzando una semplice photogallery ecco i codici:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>prova</title>
    <meta http-equiv="Content-Language" content="Italian" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
</head>
<body>

<div id="gallery">
[img]Ida 006.jpg[/img]
[img]Ida 006.jpg[/img]
[img]Ida 006.jpg[/img]
</div>
</body>
</html>
e:

codice:
#gallery {
width:750px;
}

#gallery a {
list-style:none;
padding:0;
width:180px;
position:relative;
display:inline;
width: 100px;
height:100px;
float:left;
margin:0 0 5px 5px;
text-decoration:none;
border:1px solid #000;
}

#gallery a img {
display:block;
width:99px;
height:99px;
border:0;
}

#gallery a:hover {
white-space:normal;
border-color:#ddd;
}

#gallery a:hover img {
position : absolute;
top : 110px;
left : 0;
width:auto;
height:auto;
border:1px solid #000;
}
quando vado con il mouse sopra all'immagine link giustamente viene visualizzata l'immagine originale poco sotto. Non riesco a far si che l'immagine originale venga visualizzata sempre nelle stesse coordinate (praticamente prende come coordinata x l'inizio dell'immagine link) quindi rischio di andare fuori pagina.

Suggerimenti?

Grazie mille a tutti