El problema que a continuación expongo, sólo me ocurre con el IE6, el resto de navegadores me muestra la botonera de manera perfecta.
Tengo un div contenedor que es "botonera" y dentro del mismo se encuentran los divs de cada botón y de la imagen que rellena la zona izquierda de la botonera. El div contenedor, "botonera", tiene un ancho de 807px, y las imágenes que se encuentran dentro de sus divs interiores, suman también 807px de ancho. A cada uno de estos divs, le tengo colocado un float left en el estilo, para que se coloquen el uno al lado del otro, y al div contenedor "botonera" le tengo además un white-space:no-wrap. En todos los navegadores, a excepción del IE6 se ve todo perfectamente, cargado en una misma línea, pero aquí me lo desajusta y crea un salto, pasando a la siguiente línea los tres últimos botones.
Sin embargo, si al div "bot_contact" le meto un border:1px solid red; lo que hace es que sólo pasa a la siguiente línea el botón de contacta dejando el resto donde tienen que estar, esto se debe a que le hemos añadido un borde a la capa. Al hacer esto se ve de la misma manera en todos los navegadores incluso en el IE6. Lo que no se entiende, es que al quitarle el borde, en vez de mostrarlo de la manera correcta, en una única línea, me cree el salto y pase los tres últimos botones debajo.
A continuación dejo el código de mi HTML y seguidamente el CSS de la botonera:
Código :
<!--Aquí comienza el div que contiene la botonera-->
<div id="botonera">
<div id="rellenobotonera"></div>
<a href="index1.php" class="boton_ini"><div id="boton_ini"></div></a>
<a href="qsomos.php" class="boton_qsomos"><div id="boton_qsomos"></div></a>
<a href="#" class="boton_serv" onmouseout="MM_showHideLayers('menu1','','hide');" onmouseover="MM_showHideLayers('menu1','','show');"><div id="boton_serv"></div></a>
<a href="#" class="boton_client"><div id="boton_client"></div></a>
<a href="portafolio.php" class="boton_portafol" onmouseout="MM_showHideLayers('menu2','','hide');" onmouseover="MM_showHideLayers('menu2','','show');"><div id="boton_portafol"></div></a>
<a href="contact.php" class="boton_contact"><div id="boton_contact"></div></a>
</div>
<!--Finaliza el div que contiene la botonera-->
Código :
/*Estilo para botones de alisios*/
DIV#botonera {
width:807px;
height:44px;
color:#333;
margin-left:0px;
z-index:3;
white-space:nowrap;
}
DIV#bajobotonera {
width:807px;
height:52px;
margin-left:0px;
color:#333;
z-index:4;
}
#sobre #menu1 {
position: absolute;
left: 407px;
top: 201px;
display: none;
margin:0px;
}
#sobre #menu2 {
position: absolute;
left: 625px;
top: 201px;
display: none;
margin:0px;
}
DIV#rellenobotonera{
width:192px;
height:44px;
background-image:url(../alisios/relleno_botonera.jpg);
background-repeat:no-repeat;
float:left;
}
DIV#boton_ini{
width:90px;
height:44px;
float:left;
}
A.boton_ini:link div, A.boton_ini:visited div{
background-image:url(../alisios/bot_ini.jpg);
background-repeat:no-repeat;
width:90px;
height:44px;
}
A.boton_ini:hover div{
background-image:url(../alisios/bot_ini_on.jpg);
background-repeat:no-repeat;
width:90px;
height:44px;
}
DIV#boton_qsomos{
width:125px;
height:44px;
float:left;
}
A.boton_qsomos:link div, A.boton_qsomos:visited div{
background-image:url(../alisios/bot_qsomos.jpg);
background-repeat:no-repeat;
width:125px;
height:44px;
}
A.boton_qsomos:hover div{
background-image:url(../alisios/bot_qsomos_on.jpg);
background-repeat:no-repeat;
width:125px;
height:44px;
}
DIV#boton_serv {
width:80px;
height:44px;
float:left;
}
A.boton_serv:link div, A.boton_serv:visited div{
background-image:url(../alisios/bot_servicios.jpg);
background-repeat:no-repeat;
width:80px;
height:44px;
}
A.boton_serv:hover div{
background-image:url(../alisios/bot_servicios_on.jpg);
background-repeat:no-repeat;
width:80px;
height:44px;
}
DIV#boton_client{
width:138px;
height:44px;
float:left;
}
A.boton_client:link div, A.boton_client:visited div{
background-image:url(../alisios/bot_clientes.jpg);
background-repeat:no-repeat;
width:138px;
height:44px;
}
A.boton_client:hover div{
background-image:url(../alisios/bot_clientes_on.jpg);
background-repeat:no-repeat;
width:138px;
height:44px;
}
DIV#boton_portafol {
width:91px;
height:44px;
float:left;
}
A.boton_portafol:link div, A.boton_portafol:visited div{
background-image:url(../alisios/bot_portafolio.jpg);
background-repeat:no-repeat;
width:91px;
height:44px;
}
A.boton_portafol:hover div{
background-image:url(../alisios/bot_portafolio_on.jpg);
background-repeat:no-repeat;
width:91px;
height:44px;
}
DIV#boton_contact {
width:91px;
height:44px;
float:left;
}
A.boton_contact:link div, A.boton_contact:visited div{
background-image:url(../alisios/bot_contacta.jpg);
background-repeat:no-repeat;
width:91px;
height:44px;
}
A.boton_contact:hover div{
background-image:url(../alisios/bot_contacta_on.jpg);
background-repeat:no-repeat;
width:91px;
height:44px;
}
La página de la que estoy hablando se encuentra aquí http://www.alisiosdiseno.es/index1b.php
Muchas gracias por vuestra ayuda y que tengan un buen día.[/code]
