Page 1 of 3 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. In a follow-up tutorial, you'll learn how to deal with the related bug of Firefox's inability to position the legend.
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. For some practice styling fieldsets and legends in ways that don't trigger the bugs we're going to tackle in this and the next tutorial, work through Styling Forms: Fieldset and Legend by Stephanie Sullivan.
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.
As our example form for this tutorial, we're going to work through the finished file from my earlier tutorial Vertically Align Labels and Inputs with CSS. However, you do not need to have read that tutorial in order to understand the concepts in this one, nor is the CSS creating the form layout in that tutorial needed for the effects we'll be working on in this one. It's simply a good example of a basic form containing fieldsets that we're going to try our hand at styling.
Please download the support files for this tutorial now and open the included starter form, fieldsets.html, in Dreamweaver. You'll see the two plain fieldsets in the form. A common design requirement for styled forms is for the fieldsets to have background colors. There is already a rule for the fieldset element in the head of page, but that rule only contains a declaration giving them bottom margins to space them out from each other. (The border that you see around the fieldset is a default browser style that Dreamweaver emulates.) Add another declaration of background: #ffffcc; to the rule, using your preferred method for editing CSS rules in Dreamweaver.
If you don't want to use Code View to edit CSS rules by hand, you can use the CSS Styles panel to edit and add rules. For a description of its basic functions, including how to use it to edit existing rules, see Create a Style Sheet in Dreamweaver 8, which also applies to the CS3 version.
Preview the page in a recent version of Firefox, Opera or Safari and note that the yellow background color fills the area within the fieldsets' borders, as expected. Next, preview your page in Internet Explorer (IE), any version, on Windows. Even the latest version, 7, displays the yellow background color bleeding out of the top of the fieldset, behind the legend text.
Image 1: Firefox 2 (top) displays the background color correctly contained in the fieldset border, but IE 7 (bottom) lets it bleed out behind the legend.
Keywords
CSS, cascading style sheets, styles, styling, forms, fieldsets, legends, backgrounds, background colors, bleed, border, positioning, absolute, relative, document flow, Internet Explorer, IE, Windows, bugs, hacks, workarounds, conditional comments, cross-browser
