CODEWITHSUNDEEP
htmlcss
user609926
user609926

Reputation: 831

Border of HTML fieldset overlaps legend

So I have an HTML fieldset and legend, and had issues with the background-color in the fieldset spilling outside of the borders in IE7. I was able to resolve the issue by using negative margins, like so:

fieldset {
    background-color:#E6E2D7;
    padding-top:5px;
    position:relative;
}

fieldset legend {
    position: absolute;
    top: -0.6em;
    left: 0.5em;
}

Now the border of the fieldset crosses over the legend in IE8+/Firefox/Chrome, but looks fine in IE7.

Is this a known issue and if so, is there a workaround?

Below is a link to a screenshot of the issue:

screenshot

Upvotes: 1

Views: 2215

Answers (1)

daolaf
daolaf

Reputation: 167

You can have an IE7 specific css class by adding * + html before its definition

Example:

/* IE7 specific css*/
* + html fieldset legend {
    position: absolute;
    top: -0.6em;
    left: 0.5em;
}

/* all other browsers*/
fieldset legend {
    position: absolute;
}

Upvotes: 3

Related Questions