How to force css borders to display on layered page?

StackOverflow https://stackoverflow.com/questions/836415

  •  08-07-2019
  •  | 
  •  

Question

I'm attempting to code Box and Whiskers graphs in html. The issue is, I have borders around a div (as in, the Box), but these borders disappear when overlaying the previous layer, which contains a banded color image. The preference is not to use a background image (or colors) here if I can avoid it.

The html is:


<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>

and the css is:



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;
}

Note the margin-top of -250px in the css for div.graphBoxes. As this is decreased, you'll see the borders around the Box appear as they peek out from the previous layer.

Is it possible to show the borders in this case? Thanks...

Was it helpful?

Solution

You can't layer an element without having positioning.

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}

OTHER TIPS

You probably just have to adjust your margins and paddings to make the borders show the way you want to. My tip is to remove all padding and margin, and add

* { margin: 0; padding: 0; }

to the top of your stylesheet. Then adjust all paddings and margins, widths and heights to make it look like you feel.

Keep in mind that z-index does not apply to elements which has no position-property in the stylesheet.

A humble guess is that your negative margin is causing the problems.

Sometimes it happens that the div has no indication in css file, so it sets automatically border or padding to some pix value. If you specifiy tag img in css you can get rid of this annoying setting. I totally agree with position answer. You have to set any div or other selector you create as relativ, static, absolute,etc. An exhaustive explanation of position property may be found of course on CSS W3C school.

Hope this can give further help!

It's hard to tell exactly what's going on without an image to see, but I think if you increase the z-index of the layer you want on top to 9999 and then change the layer beneath's z-index to -100 it should work as expected.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top