Primero revisa todo el codigo,
la estructura debe ser:
Y no se pueden repetir esas etiquetas que te puse.
Ahora sobre las imagenes, el problema es que al estar en posición absoluta, tal como está, dicha posición tiene por referencia la pantalla, por eso se mueve segun la resolucion.
Para evitar esto agregale position relative a .twoColHybLtHdr #container:
Código CSS:
Ver original.twoColHybLtHdr #container {
width: 80%; /* esto creará un contenedor con el 80% del ancho del navegador */
background: #FFFFFF;
margin: 0 auto 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
position: relative;
}
De esta manera la referencia será la esquina superior del contenedor y dado que esta todo dentro de él, no cambiara de lugar con respecto al resto de los elementos.
También cambie un poco el css de las imagenes, prueba y me dices:
Código CSS:
Ver original.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#CFE983;
padding: 5px;
left: 350px;
top: 200px;
border: 1px dashed #000000;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;
display: block;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
z-index: 50;
}
con esto la ubicación solo la tenes que manejar desde .thumbnail span, ya que no hace falta volver a ubicarla desde .thumbnail:hover span.
saludos
PD:
Podrias usar algun tipo de lightbox para ver las imagenes