Is there any way to get the full border when adding a border to a fieldset element?

When I add a border to fieldset element and then drag the legend down to work as a heading of sorts, the gap in the fieldset remains.

Is there a way to have the entire border, without adding a wrapper div and setting开发者_StackOverflow中文版 the border on that?

Example

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle.

Tested in IE7/IE8 and recent versions of Firefox, Chrome, Safari, Opera.

It looks the same in all of them, with the exception that IE7 is adding a little space on the left.

I had to add an innocent little wrapper span.

http://jsfiddle.net/thirtydot/ErZEj/

HTML:

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

CSS:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}

Look at this jquery fiddle : jsFiddle

Put the position: relative on the fieldset and absolutely position the legend:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative;
}

fieldset legend {
    position: absolute;
    top: 40px;
    left: 0;
    background: transparent; 
}

Updated fiddle: http://jsfiddle.net/ambiguous/YHhPP/

This renders the same way in Gecko and WebKit for me, the original fiddle has the gap in WebKit but the legend is ignoring the bottom:-40px in Gecko.

You can also try floating the legend: http://jsfiddle.net/ambiguous/Gwv4M/1/

fieldset {
    border: 2px dotted #333;   
    height: 340px;
}

fieldset legend {
    float: left;
    margin-top: 40px;
}

But IE7 and IE8 seem to butcher that one too.

Why not just leave the legend tag out and use something else for the header inside the filedset.