Box shadow CSS with a <fieldset>. Firefox vs Chrome - html

Question

I have a problem with CSS on Firefox. A fieldset that renders perfectly on Chrome:
In firefox it shows like this:
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?
Here is the code:
<div id="wrapper" style="position: relative;">
<fieldset style="width: 17em;" class="loginField"><legend align="right">Log in</legend>
<table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Username:</div></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Password:</div></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"></td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif">
</td>
<td align="right" style="vertical-align: top;">
<button type="button" class="loginButton" style="height: 25px;">>> GO</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;"><div class="loginWarning" style="display: none; width: 100%;"></div></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
And the CSS:
.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;
}

Answer 1

By the way, very nice catch on this! Definitely a future-help-type-of-question.
On the quick run I found a very alternative fix:
.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;
-webkit-box-shadow: 0 0 15px #AAAAAA;
-moz-box-shadow: 0 0 15px #AAAAAA;
box-shadow: 0 0 15px #AAAAAA;
padding-right: 1em;
padding-left: 1em;
position: absolute;
margin: -30px 0px 0px 200px;
}
And the live example: http://jsfiddle.net/xDE4x/1/
I fixed some of your CSS syntax (: instead of ; and etc). Also I added -moz- and -webkit- versions of the CSS3 syntax.
I will keep digging, but this is the first method.. It works great and should be more browser compatible then your CSS3 features.. However, it unsets the legends placement and you need to set it back with negative margins.

Answer 2

What I have done is to set the margin top to a negative value for the legend so that it appears that it has a zero height to the fieldset; I then applied a negative margin in the opposite direction to offset the first negative margin. I then added padding of equal value to the fieldset to get them to position as they normally would.
fieldset
{
padding-top: 14px;
}
fieldset legend
{
margin-top: -14px;
margin-bottom: -14px;
}

Answer 3

Alternatively you can "float" the legend as well, it doesn't require as much work to maintain your layout particularly when you have more than one fieldset. In the questioners case it would be:
.loginField legend {
float: right;
margin-top: -30px;
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;
}