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;">&gt;&gt;&nbsp;&nbsp;&nbsp;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.