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
henrycartar0
Hi ! I’ve faced a similar issue with background images conflicting with HR dashboards, and one workaround I found helpful is to manage the layout by precisely tracking time inputs and outputs. For teams needing to calculate hours worked accurately, including breaks or overtime, an online tool like https://calculadoradehorasgratis.com.br/
can simplify things. It instantly totals daily or monthly hours and even handles minute-level precision, making workflow management much smoother.
demssite
MUUCHAS gracias caballeros, no sé que haría sin vosotros...
orange
demssite
Gracias Borja ya he entendido. Semánticamente ¿algo así sería mas correcto no?:
Efestiviwonder
zigotica
muuuucho mejor aprovechar elementos ya existentes, donde vas a parar
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>
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
Sergi, la idea es una imagen horizontal de 1 px de altura para separar dos bloques. Creo que no te entiendo
zigotica
¿por qué no usas un espacio non-breaking-space?
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>
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
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
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)