Menu
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;
}
620
The CSS box-shadow property is used to apply one or more shadows to an element. In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color.
While the webkit-box-shadow is a browser-specific implementation for WebKit Browsers like Google Chrome and Safari. The box-shadow property is for the latest versions. Whereas the webkit-box-shadow property is used for older versions.
Default is 0 (the shadow is same size as blur). Color (required) – takes any color value, like hex, named, rgba or hsla. If the color value is omitted, box shadows are drawn in the foreground color (text color ). But be aware, older WebKit browsers (pre Chrome 20 and Safari 6) ignore the rule when color is omitted.
The horizontal offset(required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box. The vertical offset(required) of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
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.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
