problemas con css

[joe_kinomoto]

hola, tengo un problema en mi pagina con el css, estoy usando DIV para crear un menu con 5 botones horizontales que van abajo del contenido y abajo de los botones esta el pie de pagina, el problema es que en IE6 me deja un enorme espacio como de 500 px entre los botones y el pie de pagina y en los demas exploradores se ve bien T-T, que puedo hacer para solucionar este problema en mi web???

URL= www2.majestic-conser.com.ar

Pagina de botones

Código HTML:

<link href="../estilo.css" rel="stylesheet" type="text/css">
<div id="botones-bt1"></div>
<div class="botones-esp1" id="botones.esp"></div>
<div id="botones-bt2"></div>
<div id="botones-esp2"></div>
<div id="botones-bt3"></div>
<div id="botones-esp3"></div>
<div id="botones-bt4"></div>
<div id="botones-esp4"></div>
<div id="botones-bt5"></div> 

/*esta pagina es llamada por el index con include*/

que esta armada con el siguiente estilo en css

Código HTML:

#botones-bt1 {
	background-image: url(Archivo/bt-1.jpg);
	position: relative;
	height: 70px;
	width: 165px;
	left: 0px;
	top: 0px;
}
#botones-esp1 {
	position: relative;
	height: 70px;
	width: 3px;
	left: 165px;
	top: -70px;
	right: 0px;
	bottom: 0px;
}
#botones-bt2 {
	position: relative;
	height: 70px;
	width: 165px;
	left: 168px;
	background-image: url(Archivo/bt-1.jpg);
	background-position: 0px -70px;
	top: -70px;
	right: 0px;
	bottom: 0px;
}
#botones-esp2 {
	position: relative;
	height: 70px;
	width: 2px;
	left: 333px;
	top: -140px;
	right: 0px;
	bottom: 0px;
}
#botones-bt3 {
	background-image: url(Archivo/bt-1.jpg);
	position: relative;
	height: 70px;
	width: 165px;
	left: 335px;
	top: -210px;
	right: 0px;
	bottom: 0px;
}
#botones-esp3 {
	position: relative;
	height: 70px;
	width: 2px;
	left: 500px;
	top: -280px;
	right: 0px;
	bottom: 0px;
}
#botones-bt4 {
	background-image: url(Archivo/bt-1.jpg);
	background-position: 0px -70px;
	position: relative;
	height: 70px;
	width: 165px;
	left: 502px;
	top: -350px;
	right: 0px;
	bottom: 0px;
}
#botones-esp4 {
	position: relative;
	height: 70px;
	width: 3px;
	left: 667px;
	top: -420px;
	right: 0px;
	bottom: 0px;
}
#botones-bt5 {
	position: relative;
	height: 70px;
	width: 165px;
	left: 670px;
	top: -490px;
	right: 0px;
	bottom: 0px;
	background-image: url(Archivo/bt-1.jpg);
}

de antemano muchisimas gracias

[Triby]

No me creas mucho, pero casi estoy seguro que es la forma en que IE6 maneja las posiciones relativas; si bien, ubica los contenedores donde le estas diciendo, te deja el espacio en blanco del lugar donde realmente le correspondia.

[cleek]

Porque no intentas

Código:

<div id="contenedor_botones">
<div id="botones-bt1"></div>
<div class="botones-esp1" id="botones.esp"></div>
<div id="botones-bt2"></div>
<div id="botones-esp2"></div>
<div id="botones-bt3"></div>
<div id="botones-esp3"></div>
<div id="botones-bt4"></div>
<div id="botones-esp4"></div>
<div id="botones-bt5"></div>
</div>

y quitar los top y left del css, en vez de eso poner

Código:

#contenedor_botones div {
 float: left;
 display: block;
}

Espero te funcione