Estoy intentando codificar gráficos de Box y Whiskers en html. El problema es que tengo bordes alrededor de un div (como en el recuadro), pero estos bordes desaparecen al superponer la capa anterior, que contiene una imagen en color con bandas. La preferencia es no utilizar una imagen de fondo (o colores) aquí si puedo evitarlo.¿Cómo forzar que los bordes CSS se muestren en una página en capas?
El html es:
<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div>
<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td>
</tr>
</table>
y el css es:
table#BoxAndWhiskers tr.graphArea td {
width: 33%;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes {
z-index: 1;
margin-top: -250px;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker {
display: block;
margin-left: auto;
margin-right: auto;
}
table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 2px solid black;
}
Nota al margen superior de -250px en el CSS para div.graphBoxes. A medida que disminuya, verá aparecer los bordes alrededor del cuadro a medida que se asoman desde la capa anterior.
¿Es posible mostrar los bordes en este caso? Gracias ...
por cierto, hay otros problemas con este marcado/CSS, pero no sé lo suficiente sobre lo restringido que eres. –
con el 33% de ancho de celda; Eliminé otras 2 células idénticas del html. En cualquier caso, ¡esto lo solucionó! Es interesante que las imágenes de la línea negra se acodaron correctamente, pero la declaración de posición hizo que aparecieran los bordes div y el color de fondo. ¡¡¡Gracias!!! – mwiik