I'm at my wit's end.
Currently, I am customizing the front end of an ASP.NET built website, and one of the sections includes a fieldset with a legend. However, this specific area appears differently on IE, Firefox, and Chrome. Out of the three, IE looks the most out of place. Unfortunately, due to the limitations of this project setup, I am unable to load browser-specific stylesheets. However, I can utilize CSS browser-specific hacks within the existing stylesheet.
Here is the visual comparison of how it appears in different browsers:
Firefox View:
Chrome View:
IE View:
Below is the HTML and CSS code 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 am striving to achieve a consistent look across all browsers, resembling the appearance in Firefox. However, the challenge lies in aligning IE with the rest, particularly considering the alpha usage in the background.