Foros del Web » Creando para Internet » CSS »

IE6 Ancho en DIV con posicion absoluta

Estas en el tema de IE6 Ancho en DIV con posicion absoluta en el foro de CSS en Foros del Web. Hola Vengo con un problema que llevo cerca de 3 horas tratando de resolver: Firefox: IE6: Tengo 3 divs anidados, cada uno con una imagen ...
  #1 (permalink)  
Antiguo 23/03/2009, 22:20
Avatar de jeybi  
Fecha de Ingreso: julio-2008
Ubicación: Mexico
Mensajes: 130
Antigüedad: 15 años, 8 meses
Puntos: 10
IE6 Ancho en DIV con posicion absoluta

Hola

Vengo con un problema que llevo cerca de 3 horas tratando de resolver:

Firefox:


IE6:


Tengo 3 divs anidados, cada uno con una imagen de fondo para armar el bloque con bordes redondeados, este deberia crecer deacuerdo al contenido de texto ('Ceramic Dalmatico' en el ejemplo), lo que hago es posicionar el DIV padre hasta la derecha (right:0) y añado unos cuantos pixeles negativos para que se "suba" un poco. En FF e IE7, va de perlas. El problema es en IE6, donde mi caja se ensancha como si fuera un elemento con posicion estatica (toma el valor width de su elemento padre), cosa que no deberia pasar al estar fuera del flujo del documento.

Espero que alguien pueda ayudarme, aqui el codigo:

Código css:
Ver original
  1. #cat_1 {/*Fondo vertical*/
  2.     background: url(../images/cat_small_l.gif) repeat-x 0 0;
  3.     position:absolute;
  4.     right:0;
  5.     top:-15px;
  6. }
  7.  
  8. #cat_2 {/*Borde izk*/
  9.     background:url(../images/cat_small_v.gif) no-repeat 0 0;
  10. }
  11.  
  12. #categoryIcon{/*Borde derecho y contenedor*/
  13.     background:url(../images/cat_small_r.gif) no-repeat 100% 0;
  14.     overflow:hidden;
  15.     height:50px;
  16.     padding:4px 10px;
  17. }
  18.  
  19. #categoryIcon img{/*Imagen pequeña*/
  20.     float:left;
  21.     width:50px;
  22.     height:50px;
  23.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  24.     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
  25.     opacity:.25;
  26. }
  27.  
  28. #categoryIcon a{/*Enlace que contiene categoryIcon img*/
  29.     display:block;
  30.     text-decoration:none;
  31.     overflow:hidden;
  32. }
  33.  
  34. #categoryIcon a span{/*Texto dentro del enlace*/
  35.     display:block;
  36.     padding-left:60px;
  37. }

El HTML:

Código html:
Ver original
  1. <div id="cat_1">
  2. <div id="cat_2">
  3. <div align="left" id="categoryIcon" class="categoryIcon">
  4.  
  5. <a href="http://kazibi.x10hosting.com/Alpool/Alpool2/index.php?main_page=index&amp;cPath=19_22">
  6.   <img src="http://www.forosdelweb.com/images/ceramic.jpg" alt="Murano Ceramic Dalmatico" title=" Murano Ceramic Dalmatico " width="57" height="100" />
  7.   <br />
  8.   <span>Murano Ceramic Dalmatico</span>
  9. </a>
  10.  
  11. </div>
  12. </div>
  13. </div>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:40.