IE-only drawing order issue with fieldset and legend

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

IE-only drawing order issue with fieldset and legend

Post by skylark2 »

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:

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;}
Post Reply