Fallo en técnica de reemplazo de texto (CSS)
Hola a todos, tengo un problema que aparentemente no le veo explicación:
normalmente utilizo la técnica de remplazo de texto para maquetar las listas de botones, y sin problemas hasta ayer que en un nuevo proyecto que empecé a maquetar me está danto por saco... La cosa es que el rollover de la imagen lo hace pero cuando quito el ratón de encima del link se queda la imagen del estado over y no vuelve atrás.
El código lo he simplificado al máximo para que resulte más legible:
<code><head>
<style>
ul#list_btn {
width:200px;
list-style:none;
padding:0;
background-color: #cee1a9;
}
ul#list_btn li {
font-size:9px; }
ul#list_btn li#btn7 {
width: 178px;
height: 34px;
position: relative;
float:left;
}
ul#list_btn li#btn7 span {
position: absolute;
width: 100%;
height: 100%;
display:block;
cursor:pointer;
}
ul#list_btn li#btn7 a:link span, ul#list_btn li#btn7 a:visited span {
background: url(/images/es/btn7.gif) no-repeat;
}
ul#list_btn li#btn7 a:hover span {
background: url(/images/es/btn7_hover.gif) no-repeat;
}
ul#list_btn li#btn7 a:active span {
background: url(/images/es/btn7.gif) no-repeat;
}
</style>
</head>
<body>
<ul>
<li><a href="#">sss<span></span></a></li>
</ul>
</body>
</code>
El problema solo aparece en IE6 en todos los demás navegadores que los he probao funciona correctamente (firefox, safari, IE7)
Espero que me puedan ayudar porque creo haberlo intentado todo sin resultados, ya estoy bloqueado.
Un saludo y gracias!!
Usuario desconocido
¿Tienes el ejemplo online?
Usuario desconocido
¿Porqué tienes que poner un span dentro del enlace? Según lo que pones lo veo totalmente innecesario.
Si lo quitas te funciona bien. Lo he probado y tira con esto:
<code><style>
ul#list_btn {
width:200px;
list-style:none;
padding:0;
background-color: #cee1a9;
}
ul#list_btn li {
font-size:9px; }
ul#list_btn li#btn7 {
width: 178px;
height: 80px;
position: relative;
float:left;
}
ul#list_btn li#btn7 a {
position: absolute;
width: 100%;
height: 100%;
cursor:pointer;
display: block;
}
ul#list_btn li#btn7 a {
background-image: url(button_topic_locked.gif);
background-repeat: no-repeat;
position: relative;
}
ul#list_btn li#btn7 a:hover {
background-image: url(button_topic_new.gif);
background-repeat: no-repeat;
position: relative;
}
ul#list_btn li#btn7 a:active {
background: url(/images/es/btn7.gif) no-repeat;
}
</style>
</head>
<body>
<ul>
<li><a href="#">sss</a></li>
</ul></code>
Acuérdate de darle el id a la lista y al li, que me lo quita, además de cambiar las imagenes que yo he utilizado.
pilgrem
Este sería un pequeño y resumido ejemplo para que lo veais
http://webs.ono.com/albertorf/texto/index.html
Gracias de nuevo.
Usuario desconocido
Tienes un mail.
Ah no, porque no lo tienes en tu ficha...
Te lo dejo en mi servidor en:
http://mambrudesign.es/index_files.rar
pilgrem
Muchas gracias Mambrú por tu código, el spam lo utilizo siguiendo una técnica llamada remplazo de texto, la que tu utilizas con el text indent es otra técnica que ahora mismo no recuerdo como se llama, pero funciona.
Utilizaré el formato que me mandas y ya está.
Un saludo y muchas gracias de nuevo :D
Usuario desconocido
No se, no conozco esa técnica. Pero con esta te evitas código innecesario.
Y de hecho te diría que metieras las dos imágenes de la siguiente forma:
Las juntas, una sobre la otra y la guardas como imagen_fondo.gif, por ejemplo. Y luego juegas con la posicion del fondo en el a y el a:hover.
Así te evitas que tenga que cargar la imagen al hacer roll-over, por si tiene mala conexión o no tiene memoria para la caché sobre todo