IE-only drawing order issue with fieldset and legend
Posted: Thu Feb 03, 2011 5:15 am
I'm getting a funny issue with IE only, where when the cursor is outside the fieldset, the border is drawn through the legend, strikethrough style. When it's inside the fieldset, the border "breaks" nicely either side of the text.
I only see it on IE. Firefox and Chrome are fine - nice broken-around-the-legend border whether the cursor's hovering or not.
Any suggestions for a workaround? Here's the CSS code which changes how the border is drawn depending on the hover:
I only see it on IE. Firefox and Chrome are fine - nice broken-around-the-legend border whether the cursor's hovering or not.
Any suggestions for a workaround? Here's the CSS code which changes how the border is drawn depending on the hover:
Code: Select all
form#two fieldset {width:450px; display:block; border:1px dotted #fff; padding:5px 5px 5px 10px; font-family:verdana, sans-serif; margin-bottom:0.5em; line-height:1.5em; font-size:1em; }
form#two fieldset:hover {border:1px solid #fff;}
form#two legend {font-size:1.1em; font-weight:bold; border-bottom:2px solid #fff; margin-bottom:15px; padding:6px; background:none; color:#fff;}