Sean despiadados con mis códigos....

[emiliano espinosa]

Hola amigos del foro, creo que he finalizado la 'guía' del portal que estoy ejecutando; pero solo es 1 problema (creo) el que tengo; las imágenes se ven 'desplazadas' hacia arriba en IE, situación que en FF no, alguna sugerencia?

me encantaría que criticaran 'despiadadamente' mis códigos css y html, porfa, eso me ayudará muchísimo y a otros también.

http://www.demonpage.com.mx

, mi código css es:

Código:

/* CSS Document */

body {
text-align: center;
background-image: url(bg.gif);
background-repeat: repeat;
background-position: top;
background-color: #cc9;
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;
color: #cc9;
}
img {
border: 0;
text-decoration: none;
}
span {
font: normal bold 11px/10pt Helvetica, Tahoma, Arial;
color: #d4ceaf;
text-align: center;
line-height: 15px;
}
#contenido {
position: absolute;
z-index: 0;
background-image: url(backtd.jpg);
background-position: center;
background-repeat: no-repeat;
width: 750px;
height: 650px;
margin: 0 auto;
text-align: left;
top: 5%;
left: 10%;
}	
#logo {
position: absolute;
z-index: 1;
width: 76px;
height: 75px;
top: 21px;
left: 127px;
}
#menu {
position: absolute;
z-index: 6;
width: 380px;
height: 10px;
top: 75px;
left: 220px;
}
#imgall {
position: absolute;
z-index: 2;
width: 545px;
height: 295px;
top: 115px;
left: 41px;
text-align: center;
background-image: url(backall.gif);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
z-index: 4;
width: 100px;
height: 294px;
top: 115px;
left: 610px;
text-align: center;
background-image: url(backmenu2.gif);
background-repeat: no-repeat;
}
#click {
position: absolute;
z-index: 7;
width: 70px;
height: 100px;
top: 430px;
left: 40px;
text-align: center;
background-image: url(backclik.gif);
background-repeat: no-repeat;
}
#thumb {
position: absolute;
z-index: 5;
width: 462px;
height: 147px;
top: 430px;
left: 127px;
text-align: center;
background-image: url(backthumb.gif);
background-repeat: no-repeat;
}
#anim {
position: absolute;
z-index: 3;
width: 100px;
height: 100px;
top: 430px;
left: 607px;
text-align: center;
}
#info {
position: absolute;
z-index: 1;
width: 705px;
height: 40px;
top: 590px;
left: 23px;
text-align: center;
line-height: 13px;
}
#imgcontac {
position: absolute;
z-index: 2;
width: 150px;
height: 300px;
top: 115px;
left: 398px;
}
#formtext {
position: absolute;
z-index: 3;
width: 300px;
height: 300px;
top: 115px;
left: 560px;
}
a {
text-decoration: none;
font: normal bold 12px/13pt Helvetica, Tahoma, Arial; 
color: #d4ceaf;
}
a:link {
color: #d4ceaf;
}
a:visited {
color: #d07614;
}
a:hover {
color: #a97b00;
}
a:active {
color: #f60;
}

Gracias amigos, buen día.....

[euforico]

Estimado:

Podrías disminuirlas líneas de tu CSS de forma considerable si agrupas su contenido, por ejemplo:

Código:

body {
text-align: center;
background-image: url(bg.gif);
background-repeat: repeat;
background-position: top;
background-color: #cc9;
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;
color: #cc9;
}

Podría agruparse de la siguiente forma:

Código:

body {
background: #cc9 url(bg.gif) top repeat;
text-align: center;
/* La siguiente linea esta mal declarada podría ser así 
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;*/
font: 11px Heveltica, tahoma, arial;
color: #cc9;
}

Saludos

[hades87]

a parte de lo que dijo euforico a que te refieres con que se ven desplazadas hacia arriba?