Reemplazo de imagen falla en IE6
Hola gentes, me encuentro con un problema en un reemplazo de imagen. Utilizando un código que a alguien del foro le sonará (Gracias Borja) me ocurre que en FF, Opera,... se ve bien pero en IE6WIN no me muestra la imagen entera. El codigo que uso es este (CSS):
<code>
*.reemplazo_imagen{
display: block;
position: relative;
margin: 0em;
overflow: hidden;
}
*.reemplazo_imagen *.img{
border: 1px solid red;
display: block;
position: absolute;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
background-position: top left;
background-repeat: no-repeat;
}
*.reemplazo_imagen a, a.reemplazo_imagen{
cursor: pointer;
text-decoration: none;
}
*.reemplazo_imagen a:hover, a.reemplazo_imagen:hover{
text-decoration: none;
}
</code>
el xhtml:
<code>[h2][a href="?page_id=6" id="streaming" class="reemplazo_imagen"][span class="img"][/span]Titulo[span class="streaming"]STREAMING[/span][/a][/h2]
</code>
y luego le doy background a la clase mediante css:
<code>a#streaming span.img{
background-image: url(img/streaming-big.gif);
}</code>
Os pongo una imagen para que entendáis mejor lo que sucede, ya que el sitio no puedo pasar el link (el borde rojo es el que está aplicado al span *.reemplazo_imagen *.img)
http://img214.imageshack.us/img214/1263/ejemploba8.gif
*Nota: Sustituir [ por<y>
orange
Tienes que definir un tamaño para el elemento al que tienes aplicada *.reemplazo_imagen. NO a través de la clase (porque entonces dejaría de ser generica) sino a través de un ID.
PD: Si llego a saber que mis clases iban a andar campando por ahí les hubiera puesto unos nombrecitos en ingles o alguna gilipollez del estilo XD
demssite
Solucionado poniendo esto:
<code>
#streaming a span.img{
height: 37px;
background-image: url(img/streaming-big.gif);
}</code>
Muuchas gracias borjita.
PD: Pos no se podemos pensar algún nombre wapo así in inglish tipo .orng_img_replacement.
Jejejeje. ;)
orange
demssite
Solucionado poniendo esto:
Es que eso (height) específica y deliberadamente debe definirse ahí (incluso, ya a nivel metodológico y de claridad en el código, deberías ponerle el width).
demssite
orange
Es que eso (height) específica y deliberadamente debe definirse ahí (incluso, ya a nivel metodológico y de claridad en el código, deberías ponerle el width).
¿Por qué debería definirse a nivel metodológico el width también?
Y una duda que tengo un poco aparte de todo esto. Algún validador de accesibilidad te comenta que uses medidas relativas siempre en las hojas de estilo. ¿Esto no es aplicable por ejemplo aquí no? Ya que una imagen tiene un tamaño fijo en pixels
¿Estoy enlo correcto no?
orange
Pues porque a nivel de CSS estás haciendo cosas mínimamente complejas en esos pequeños espacios, lo cual te puede dar problemas entre navegadores si no lo tienes todo bien atado (precisamente lo que te pasaba a ti por no definir el height).
Además piensa que en estos casos las medidas siempre van a estar definidas (se trata de meter unas imágenes que siempre van a tener unas medidas exactas) con lo que dejarlo al albur de las interpretaciones por defecto no es lo más elegante, aunque en un momento dado el comportamiento encaje con lo que tu quieres.
A las malas, y si todas las opciones de un determinado menú (o lo que sea) van a medir lo mismo, puedes currarte una regla genérica para todas en lugar de ir una por una. Pero vamos que yo siempre le meto medidas para evitar sustos.
demssite
Entendido perfestamente, pero las medidas como te comentaba antes ¿en pixeles siempre no?
orange
demssite
Y una duda que tengo un poco aparte de todo esto. Algún validador de accesibilidad te comenta que uses medidas relativas siempre en las hojas de estilo. ¿Esto no es aplicable por ejemplo aquí no? Ya que una imagen tiene un tamaño fijo en pixels
¿Estoy enlo correcto no?
Depende.
Puedes definir el tamaño de la imagen en EMs, si el tamaño base del texto es de 10px clavarás las medidas de la imagen al pixel, pero serán elásticas.
Ejemplos (aunque ya han metido mano a mi código y no está tan limpito como yo lo dejé)
https://www.tubancaja.es/
(mira como "crecen" las imágenes de los banner de abajo, incluso el banner en flash, el logo ya se lo han cargado)
http://www.upm.es/estudios/ingreso/selectividad/
El problema es que para hacer imágenes que sean elásticas hay que meter el IMG dentro del contenido, porque si utilizas un reemplazo de imagen no puedes darle un tamaño a la imagen de fondo (esto cambiará con CSS3).
En definitiva, tienes un comportamiento elástico mejor en imágenes (lo que mola para accesibilidad) aunque pierdes algo de semántica en el HTML (lo que no mola para accesibilidad). Es cuestión de marcarse prioridades (y ojo, que hay otras alternativas de código que las que yo he propuesto).
txuma Plus
Acado de escribir algo relacionado con esto en otro sitio, y me permito la pataleta aquí también:
¿Cuando van a desarrollar navegadores buenos de verdad, para que hacer un diseño realmente elástico sea posible y fácil? Al final, es algo tan sencillo como añadir una opción de 'Zoom-in, zoom-out' (que ya tiene IE7 y que está por llegar en Firefox 3). La unidad natural de una pantalla es el pixel, así que lo lógico es poder especificar las medidas en esa unidad (salvo que quiera algo 'líquido'), y que el agente que interprete la página sea quien añada la funcionalidad para que crezca o decreza. Es que hoy tengo el día guerrero y estoy un poco cansado de que la responsabilidad de 'hacer las cosas bien' sea sólo de los que desarrollamos, cuando las soluciones son más sencillas desde el otro lado.
Y ahora, vale, ya vuelvo a la tierra y sigo trabajando :)
demssite
Pues si la verdad es el primer diseño elástico que estoy haciendo así un poco en serio y hay cosas que me están dando bastante guerra, en parte por mi desconocimiento (que se se va subsanando a diario) y por otra parte por la incopetencia de 3as personas.
Lo el FF3 menos mal!!! ya era hora.
Bueno cuando termine la web y la ponga en produción ya pondré el enlace pa que me comentéis.
Un saludo.
Diego
zigotica
orange
Ejemplos (aunque ya han metido mano a mi código y no está tan limpito como yo lo dejé)
https://www.tubancaja.es/
(mira como "crecen" las imágenes de los banner de abajo, incluso el banner en flash, el logo ya se lo han cargado)
OT: hombre, por fin, ¿y es oficial? lo digo porque tengo una nueva revision del flaccess (v2.3) que no te afecta en esa web pero que si aun no has termindo el proyecto podriamos renovar. y ya de paso publico definitivamente el script de manera oficial.
orange
Sí, sí... oficialísimo, ya ves que o tienen colgado. Perdona que no te avisé
:oops:
zigotica
no problemo
entonces puedes modificar el script o ya es tarde?
orange
zigotica
no problemo
entonces puedes modificar el script o ya es tarde?
Má,damelo y lo vemos, aunque yo no lo incorporaría ya