Fieldset Legend in Internet Explorer

Question

I'm pulling my hair out here.

I'm styling the front end of an ASP.NET built site, one of the sections is a fieldset with a legend, however this area looks totally different between IE, firefox and chrome. IE being by far the most off. I don't have the ability to load browser specific stylesheets with the way that this build is set up, but I can use css browser specific hacks in the one stylesheet.

This is how it looks in firefox:

This is how it looks in chrome:

This is how it looks in IE:

This is my html and css for the fieldset and legend:

 #TabContainerAlerts_TabPanelBloodPressureAlerts_UpdatePanelBloodPressureAlerts > fieldset, #TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts > fieldset, #TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts > fieldset, #TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts > fieldset, #TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts > fieldset { border: 1px solid #7a8dab; border-radius: 10px; float: left; width: 81%; display: inline-block; margin-left: -5px; margin-top: 10px; margin-bottom: 10px; } #TabContainerAlerts_TabPanelBloodPressureAlerts_UpdatePanelBloodPressureAlerts > fieldset > legend, #TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts > fieldset > legend, #TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts > fieldset > legend, #TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts > fieldset > legend, #TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts > fieldset > legend { text-indent: 8px; display: inline-block; position: relative; top: -10px\\9; /* IE 8 and below */ } 

 <fieldset id="FieldSetAlertsBloodPressureSystolic"> <legend> Systolic <input id="TabContainerAlerts_TabPanelBloodPressureAlerts_CheckBoxBloodPressureSystolicAlertEnablement" type="checkbox" onclick="javascript:setTimeout('__doPostBack(\\'TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement\\',\\'\\')', 0)" checked="checked" name="TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement"></input> </legend> <div id="TabContainerAlerts_TabPanelBloodPressureAlerts_PanelBloodPressureSystolicAlerts"> <div id="DivBloodPressureSystolicAlertSection"> <div id="DivBloodPressureSystolicAlertNormalWrapper">…</div> <div id="DivBloodPressureSystolicAlertWarningWrapper">…</div> <div id="DivBloodPressureSystolicAlertCriticalWrapper">…</div> <div id="DivMultiSliderExtenderBloodPressureSystolicAlert">…</div> </div> </div> </fieldset> 

I'm trying to make everything look like it does in firefox, but I'm starting to think there is going to be no way IE will let me do that, especially with the alpha I am using in my bg.

Answer 1

You can use the following css trick:

fieldset > legend {
   height:30px; 
   position:absolute;
   margin-top:-10px;
   background:blue; 
}

The the height 30px is an example, and the blue should be replaced by the color of the tabs background.