title: Fieldset Legend in Internet Explorer
body: <p>I'm pulling my hair out here.</p>
  
  <p>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.</p>
  
  <p>This is how it looks in firefox: 
  <img src="https://i.stack.imgur.com/ydHNe.jpg" alt="Firefox screen capture"></p>
  
  <p>This is how it looks in chrome:
  <img src="https://i.stack.imgur.com/xkqnL.jpg" alt="Chrome screen capture"></p>
  
  <p>This is how it looks in IE:
  <img src="https://i.stack.imgur.com/kOr3k.jpg" alt="IE screen capture"></p>
  
  <p>This is my html and css for the fieldset and legend:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#TabContainerAlerts_TabPanelBloodPressureAlerts_UpdatePanelBloodPressureAlerts &gt; fieldset,
  #TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts &gt; fieldset,
  #TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts &gt; fieldset,
  #TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts &gt; fieldset,
  #TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts &gt; 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 &gt; fieldset &gt; legend,
  #TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts &gt; fieldset &gt; legend,
  #TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts &gt; fieldset &gt; legend,
  #TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts &gt; fieldset &gt; legend,
  #TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts &gt; fieldset &gt; legend {
    text-indent: 8px;
    display: inline-block;
    position: relative;
    top: -10px\9;
    /* IE 8 and below */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset id="FieldSetAlertsBloodPressureSystolic"&gt;
    &lt;legend&gt;
      Systolic
  
      &lt;input id="TabContainerAlerts_TabPanelBloodPressureAlerts_CheckBoxBloodPressureSystolicAlertEnablement" type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement\',\'\')', 0)"
      checked="checked" name="TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement"&gt;&lt;/input&gt;
    &lt;/legend&gt;
    &lt;div id="TabContainerAlerts_TabPanelBloodPressureAlerts_PanelBloodPressureSystolicAlerts"&gt;
      &lt;div id="DivBloodPressureSystolicAlertSection"&gt;
        &lt;div id="DivBloodPressureSystolicAlertNormalWrapper"&gt;…&lt;/div&gt;
        &lt;div id="DivBloodPressureSystolicAlertWarningWrapper"&gt;…&lt;/div&gt;
        &lt;div id="DivBloodPressureSystolicAlertCriticalWrapper"&gt;…&lt;/div&gt;
        &lt;div id="DivMultiSliderExtenderBloodPressureSystolicAlert"&gt;…&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>