Fieldsets are useful little things, they can easily segment or highlight areas on a website with much success. Use CSS to make our area stand out and give our fieldset a background colour or image. Our old friend Internet Explorer however doesn`t play ball with fieldset backgrounds.
Apply a background to a fieldset and IE chooses to apply the background colour (or image) to the legend as well as the fieldset, giving the illusion the colour is bleeding out of the area.
Here is how it should look and does in standard compliant browsers
and here is the IE output
I am asked quite often how I get around this bug and force IE to render the fieldset on their website as standard compliant browsers such as Firefox do.
There are two methods available to you, well, there may be more but I have come up with two and these both work on all browsers and platforms I have tried it on. We have the css hack and image based methods. Use the links below for each method.
css method to fix IE fieldset background bug
image method to fix IE fieldset background bug
Thanks, it works for me!
If you use background image, alternatively you can use conditional css and apply background-position-y: xx as you need.