Las declaraciones para la ubicación vertical en los div's no funcionó

[emiliano espinosa]

Amigos del foro, tengo 3 pequeños problemas que no he podido resolver:

1. La imagen de 'Head' debe ubicarse arriba en su div, claro que declaré el 'vertical-align: top;' correspondiente, pero aún así no lo respeta; peor aún, sobresale del dicho div en la parte baja.
2. Las palabras que conforman el menú principal no he podido 'centrarlas verticalmente' en su respectivo div, el cual tiene un background a rayas naranjas; estas palabras del menú principal se ubican en la parte baja de su div sin que yo sepa porqué, claro que declaré su 'vertical-align: middle;'.
3. De estas mismas palabras del menú principal, les consulto lo siguiente: hay alguna manera de separarlas más entre ellas?, es decir, hacer más grande el espacio entre palabra y palabra?, yo lo intente con simples golpes de la barra espaciadora en mi código html, pero sin buen resultado y el vspace: no me funcionó en palabras que se usen para ligas.

Les dejo la liga para que lo chequen ustedes mismos, una imagen explicando, específicamente los 3 problemas y el código Css.

http://www.demonpage.com.mx



Gracias amigos, de antemano gracias.

Código:

/* CSS Document */

body {
background-image: url(bkbd.gif);
background-repeat: repeat-x;
background-position: bottom;
background-color: #1f1d16;
font: 11px, Helvetica, arial, tahoma;
color: #f60;
text-align: center;
}
img {
text-decoration: none;
border: 0;
}
span {
font: 11px, Helvetica, arial, tahoma;
font-weight: bold;
color: #d4ceaf;
}
#contenedor {
position: absolute;
z-index: 1;
background-image: url(bkcont.jpg);
background-repeat: no-repeat;
background-position: bottom;
text-align: left;
width: 900px;
height: 670px;
left: 10%;
}
#head {
	position: absolute;
	z-index: 2;
	background-color: #f0f0e0;
	width: 900px;
	height: 150px;
	text-align: center;
	vertical-align: middle;
}
#menu {
	position: absolute;
	z-index: 3;
	background-image: url(bkmen.jpg);
	background-repeat: repeat-x;
	text-align: center;
	vertical-align: middle;
	width: 900px;
	height: 25px;
	top: 151px;
}
#imgall {
	position: absolute;
	z-index: 2;
	text-align: center;
	left: 192px;
	top: 200px;
	width: 507px;
}
#thumb {
	position: absolute;
	z-index: 4;
	text-align: center;
	top: 465px;
	width: 900px;
}
#info {
	position: absolute;
	z-index: 2;
	width: 900px;
	height: 50px;
	text-align: center;
	line-height: 15px;
	left: 0px;
	top: 616px;
}
a {
text-decoration: none;
font: normal bold 12px/13pt Helvetica, tahoma, arial; 
color: #2d291c;
}
a:link {
color: #2d291c;
}
a:visited {
color: #c00;
}
a:hover {
color: #c00;
}
a:active {
color: #990;
}

[PatomaS]

Hola

Los márgenes y espacio de los diferentes elementos y en los diferentes navegadores puede ser un serio problema de controlar en algunas ocasiones, por eso, en cada proyecto que hago, suelo iniciar siempre con esta declaración:

Código:

* {padding: 0; margin: 0; border: 0;}

Esto garantiza que durante el desarrollo de los estilos, deberé mirar y controlar cada espacio y margen, lo que en principio suena fastidioso, pero al final, las cosas salen exactamente como quiero y espero.

Puedes probar dicha mecánica.

Felicidad

[emiliano espinosa]

Pues déjenme les actualizo, la bronca parece ser que está en FF, aún cuando yo diseñé ahí; en IE solo hay un problema, las palabras que conforman el menú principal están ubicadas arriba en su div (a diferencia que en FF que están abajo) y claro, todavía no me entero de cómo hacer más grande el espacio entre esas palabras.......