The IE Fieldset Background Color Bleed Bug ![[Registration never required for free content]](/images/free.gif)
By: Zoe Gillenwater on Tuesday, June 19, 2007
Reader Level: 
When it comes to changing text styles in forms, there's little you can't do. As soon as you attempt extending your custom styles into the realm of background colors, borders, and layout, however, things can get difficult. Styling fieldsets and legends are among the more difficult form elements to style because they come laden with a good deal of default browser styling, as well as a few bugs.
In this tutorial, we'll focus on one of the most common fieldset and legend styling frustrations: the fieldset background color bleed bug in Internet Explorer, where the background color of the fieldset extends outside the top border of the fieldset. This bug occurs any and every time you try to give a fieldset a background color, and it affects even the latest version of IE, 7. This tutorial will show you how to fix the bug using a couple additional CSS rules and no changes to markup or hacks.
This tutorial assumes you're already familiar with the building blocks of forms and how to use them correctly to build accessible forms. If you do not have a good understanding of what fieldsets and legends are and how to use them, please see Tricia Littlefield's video tutorial Accessible Forms with Dreamweaver, which covers not only those elements but all the standard form components. You'll also need to have a good understanding of document flow and positioning for this tutorial. For a great introduction to these concepts, see Flowing and Positioning: Two Page Models -Revised for IE7 by Holly Bergevin and John Gallant.
