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
#cat_1 {/*Fondo vertical*/ background: url(../images/cat_small_l.gif) repeat-x 0 0; position:absolute; right:0; top:-15px; } #cat_2 {/*Borde izk*/ background:url(../images/cat_small_v.gif) no-repeat 0 0; } #categoryIcon{/*Borde derecho y contenedor*/ background:url(../images/cat_small_r.gif) no-repeat 100% 0; overflow:hidden; height:50px; padding:4px 10px; } #categoryIcon img{/*Imagen pequeña*/ float:left; width:50px; height:50px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity:.25; } #categoryIcon a{/*Enlace que contiene categoryIcon img*/ display:block; text-decoration:none; overflow:hidden; } #categoryIcon a span{/*Texto dentro del enlace*/ display:block; padding-left:60px; }
El HTML:
Código html:
Ver original
<div id="cat_1"> <div id="cat_2"> <div align="left" id="categoryIcon" class="categoryIcon"> <a href="http://kazibi.x10hosting.com/Alpool/Alpool2/index.php?main_page=index&cPath=19_22"> <img src="http://www.forosdelweb.com/images/ceramic.jpg" alt="Murano Ceramic Dalmatico" title=" Murano Ceramic Dalmatico " width="57" height="100" /> <br /> </a> </div> </div> </div>