Comunidad de diseño web y desarrollo en internet online

Botonera con DIVS e IE6

Citar            
MensajeEscrito el 01 Abr 2008 12:41 pm
Hola a tod@s...

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]

Por ayagaure

29 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Abr 2008 01:29 pm
No me enteré muy bien de la descripción de tu problema, pues hablas de "bot_contact", pero luego no vuelve a aparecer por más sitios.

Veamos.
¿Dices que con un style="border-width:1px;" se arregla?
¿Y no te interesa dejar el borde?
Si quieres quitar el borde, haz lo siguiente: style="border:transparent 1px solid;"
Así el borde arreglará tu problema, pero será "transparent"e.

Otra cosa...
prueba el "hack" del style="overflow-hidden"; (poniéndoselo a la capa que contiene los botones problemáticos)
Hace unos post, eso arregló algunos problemas.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 01 Abr 2008 01:47 pm
A lo mejor me expliqué mal cuando hablé del borde. Me refería a que al añadirle un borde para ver que podía estar mal en el DIV en el explorer, no fuera que tuviera un margen o algo que no cogían el resto de navegadores, mostraba la misma apariencia, tanto en IE6 como en el resto, el botón de contacta se quedaba debajo del resto alineado a la izquierda. Sin embargo, al quitarle ese borde de prueba, el aspecto ya no era el mismo en todos, ya que en IE6 genera un salto, pasando abajo los tres últimos botones.

Me he puesto a trastear un poco mi hoja de estilos de los botones, y se ha solucionado metiéndole 811px de ancho a la capa contenedora (botonera). Y se muestra igual en todos los lados. Al guien me podría explicar como si la medida de la cabecera es de 807px, la suma de los botones y la imagen de relleno de la botonera es de 807px también, como carajo le tengo que añadir 4px más a la contenedora de los botones para que me los muestre todos en el mismo nivel?

Muchas gracias por tu respuesta.

Por ayagaure

29 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Abr 2008 01:58 pm
¿has probado con el "overflow:hidden" que te comentaba?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.