ReDsgn » Bug http://www.redsgn.com When small things come together great things happen. Tue, 10 Nov 2009 04:15:01 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Fixing those bleeding backgrounds on fieldsets http://www.redsgn.com/2009/02/19/fixing-those-bleeding-backgrounds-on-fieldsets/ http://www.redsgn.com/2009/02/19/fixing-those-bleeding-backgrounds-on-fieldsets/#comments Thu, 19 Feb 2009 15:33:12 +0000 Paul Boutin http://www.redsgn.com/?p=162 Ever encounter this IE bug… The issue occurs when you style fieldsets with a background color. The top of the fieldset color will bleed out of the border to the top of the legend. IE pads to the outside of borders and its apparent here when the padding is increased to accommodate a legend which is over the border of the fieldset.

ie fieldset bleed

This is a simple fix that will work in all browsers so no need for special IE Hacks or Conditional Comments.

First add a position: relative; declaration to the fieldset rule so that the absolute positioning of the legend will be relative to its fieldset:

fieldset {
position: relative;
background: #ffffcc;
}

Next, add a new rule for the legend element and set its absolute positioning properties to emulate its current position:

legend {
position: absolute;
top: -.7em;
left: .2em;
}

That’s it… That’s all there is to it.

]]> http://www.redsgn.com/2009/02/19/fixing-those-bleeding-backgrounds-on-fieldsets/feed/ 0