title: Box shadow CSS with a <fieldset>. Firefox vs Chrome
body: <p>I have a problem with CSS on Firefox. A fieldset that renders perfectly on Chrome:
  <img src="https://i.stack.imgur.com/rXBN3.png" alt="Chrome output"></p>
  
  <p>In firefox it shows like this:</p>
  
  <p><img src="https://i.stack.imgur.com/1ovsw.png" alt="Firefox output"></p>
  
  <p>I discovered that removing the boxshadow from the CSS the top section, above the fieldset border, disappears on Firefox, but then I don't have the shadow. How can put them both the same?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div id="wrapper" style="position: relative;"&gt;
          &lt;fieldset style="width: 17em;" class="loginField"&gt;&lt;legend align="right"&gt;Log in&lt;/legend&gt;
          &lt;table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;&lt;div class="gwt-Label" style="height: auto; width: 100%;"&gt;Username:&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;&lt;input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;&lt;div class="gwt-Label" style="height: auto; width: 100%;"&gt;Password:&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;&lt;input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;
                          &lt;table cellspacing="0" cellpadding="0" style="width: 100%;"&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td align="left" style="vertical-align: top;"&gt;
                                          &lt;img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif"&gt;
                                      &lt;/td&gt;
                                      &lt;td align="right" style="vertical-align: top;"&gt;
                                          &lt;button type="button" class="loginButton" style="height: 25px;"&gt;&amp;gt;&amp;gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;GO&lt;/button&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left" style="vertical-align: top;"&gt;&lt;div class="loginWarning" style="display: none; width: 100%;"&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.loginButton {
      background: -moz-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
      background: -webkit-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
      border: 1px solid #093C75;
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 1px 0 #FFFFFF;
      color: #FFFFFF;
      cursor: pointer;
      font-family: Arial,sans-serif;
      font-size: 12px;
      font-weight: bold;
      margin-right: -1em;
      margin-top: 1em;
      padding: 5px 10px;
      text-decoration: none;
      text-shadow: 0 1px 1px #333333;
      text-transform: uppercase;
  
  }
  .loginButton:hover {
              background: -moz-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
              background: -webkit-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
          border-color: #093C75;
          text-decoration: none;
  }
  .loginButton:active {
      background: -moz-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
      background: -webkit-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
      border-color: #093C75;
      outline: medium none;;  
  }
  .loginWarning {
      padding-top: 0.2em;
      font-family: 'Aldrich', sans-serif;
      color:#FE2E2E;
      font-size: 12px;
      font-weight: 400;
  }
  .loginField {
      padding-left: 2em;
      padding-right: 2em;
      padding-top: 1em;
      border: 0;
      background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
      background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
      border: 1px solid #AAAAAA;
          border-radius: 10px 10px 10px 10px;
              box-shadow: 0 0 15px #AAAAAA;
          margin: 60px auto 0;
          padding: 20px;
  }
  .loginField legend {
      text-align: right;
      background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
      background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
      border-radius: 10px 10px 10px 10px;
              box-shadow: 0 0 15px #AAAAAA;
      padding-right: 1em;
      padding-left: 1em:
  }
  .loginField img {
      max-width: 24px;
  }
  
  .loginVerticalPanel {
      margin: 0 auto 0 auto;      
  }
  .loginVerticalPanel input {
      background: -webkit-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
      background: -moz-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
      border: 1px solid #AAAAAA;
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 0 3px #AAAAAA;
      padding: 5px;
  }
  </code></pre>