spiderplant0
spiderplant0

Reputation: 3952

Problems with solid fieldset border in IE8

I wish to style my fieldsets so that they have a solid border.

So I styled it like this...

fieldset {
    margin: 5px;
    padding: 20px;
    border: solid orange;
    border-width: 30px 1px 1px 1px;
}

fieldset legend {
    background-color: orange;
    line-height: 30px;
    /* uncomment line below for IE8 */
    /* margin-top: -50px; */
}

And it looks like this on most browsers (IE9, Chrome, FF14) ...

how it should look

I have problems getting this to work on IE8. I have added a -ve margin to align the legend properly but there are still 2 vertical white bars each side of the legend that I cant get rid of...

on MSIE8

Fiddle... http://jsfiddle.net/spiderplant0/NmwuC/

Any ideas how to get rid of the white bars on IE8 (I dont care about IE7, IE6 etc)?

(By the way, the HTML is generated by the Drupal framework so I'd prefer a solution that doesnt involve changing the HTML.)

Upvotes: 1

Views: 2838

Answers (1)

Narendra
Narendra

Reputation: 3117

I checked it and changed for IE8. Check http://jsfiddle.net/NmwuC/16/

This is only for IE8.

Upvotes: 2

Related Questions