Box shadow CSS with a . Firefox vs Chrome?

By the way, very nice catch on this! Definitely a future-help-type-of-question.

Up vote 4 down vote favorite 1 share g+ share fb share tw.

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: Log in Username: Password: >> GO 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; } html css firefox google-chrome link|improve this question asked Sep 2 '11 at 21:12elvispt419311 90% accept rate.

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; -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: 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.

Thanks. It works fine. :) – elvispt Sep 3 '11 at 0:24 TL;DR set the legend to position:absolute, and apply a negative top margin to bump it back up where it goes.

– joeshmo Oct 27 '11 at 4:37.

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; }.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.