Problema HR con background-image
3 seguidores
Hola gentes, estoy intentando poner un divisor con background image, como bien comprobé y leí haciéndolo así no se bien en IE6.
Así que opté por poner un div quedando así:
<code>[div class="divisor"][/div]</code>
y así el CSS:
<code>.divisor {
border: 1px solid red;
width: 500px;
height: 1px;
background: url(../gfx/divisor.jpg) no-repeat left top;
margin: 0;
padding: 0;
}</code>
La cosa es que en internet explorer 6 no me mide un pixel de height NUNCA me lo pone mucho mayor y no sé porqué.
Un saludo.
Diego
orange
¿Y no cres que sería mucho más limpio ahorrarse el HR y meter el borde y la imagen de fondo dentro de los propios Items (que imagino componen la lista)
demssite
No es una lista es para separar dos artículos, y ya tienen background image a parte cada uno, es simplemente una linea divisoria, un div separador de dos bloques
demssite
A ver probando y trasteando he leído que poniendo line-height a 1px funcinoaría y nada, también he leído poner overflow:none y nadfa y me ha funcionado esto:
<div><!-- --></div>
Es decir poner un comentario dentro del div, lo que pasa es que me parece una guarrada esto.
¿Cómo lo soléis solucionar vosotros?
Un saludo y gracias.
Diego
demssite
Finalmente he encontrado otra solución que creo que es la mejor, pero bueno espero me comentéis si es así o no. Os la dejo aquí abajo:
CSS
div.divisor {
height: 1px;
background: url(../gfx/divisor.jpg);
}
div.divisor hr { /* for CSS1 browsers */
display: none;
}
div.divisor * { /* for CSS2 browsers */
display: none;
}
HTML
<div><hr></div>
zigotica
¿por qué no usas un espacio non-breaking-space?
demssite
Sergi, la idea es una imagen horizontal de 1 px de altura para separar dos bloques. Creo que no te entiendo
orange
Pues pon esa línea como fondo a uno de los bloques y te ahorras código que NO tiene más sentido que para ser usado como presentación.
demssite
Gracias Borja ya he entendido. Semánticamente ¿algo así sería mas correcto no?:
HTML
<h3>Lo que sea</h3>
CSS
<code>h3.divisor {
background: url(../gfx/divisor.jpg) no-repeat left bottom;
padding-bottom: 0.3em;
margin-bottom: 0.3em;
}</code>
zigotica
muuuucho mejor aprovechar elementos ya existentes, donde vas a parar
orange
demssite
Gracias Borja ya he entendido. Semánticamente ¿algo así sería mas correcto no?:
Efestiviwonder
demssite
MUUCHAS gracias caballeros, no sé que haría sin vosotros...