The Problem: the background-color set for fieldset colours in more than just what’s inside the boundaries of the fieldset, i.e. its borders. What happens is it colours in from the top of the legend to the bottom of the fieldset.
What can I do to make it only colour what’s inside the boundaries (borders) of the fieldset? I tried putting a <span> inside the fieldset, setting it as block and giving it a background colour, but it didn’t colour the part where the legend overlaps the fieldset.
I will be using the fieldset for forms, but also in some places, without forms, but I’ve found that in the context of my design, having the background be the same as its parent’s background seems to make it fit in better; thanks for the link however, as I’m sure it will come in handy for other things :).
fieldset is a block element. so adjust its boundaris.give margin of legend a negative value & made padding-top of fieldset none!
border: 1px solid green;
margin:-8px 0 0 0;
It will work
I’ve used the span-inside-the-legend trick… while I’ve been able to positioned the legend completely offscreen using pos: absolute and both a left: -9999em for regular browsers (incl IE) and margin-left: -9999em for Gecko, when positioning on the page somewhere, I’ve needed the span to not hack so much for IE then. I can set the fieldset to pos: rel and the span inside the legend to pos: abso, and this has worked out (maybe because IE has trouble positioning someone who’s nearest positioned ancestor isn’t a direct parent but a grandparent or whatever). I don’t like the extra markup though, but it works.