Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS box-shadow in Firefox showing faint top border/shadow

CSS box-shadow in Firefox showing faint top border/shadow

Problem

I've set up an example which illustrates my issue: http://jsfiddle.net/XZeYK/5/

If you view this in Chrome, it's fine. Firefox, however, adds an unwanted border to the top of the #navigation element. I can get rid of it by setting a negative spread radius, but this then screws up my rounded corners.

Any ideas?

Thanks, Monty

Problem courtesy of: Monty

Solution

Hi actually its due to box-shadow as you defined so i just reduced the blur value of your box-shadow property and its working fine now.

CSS

.shadow {
    -moz-box-shadow: 0px 3px 4px -1px gray;
    -webkit-box-shadow: 0px 3px 4px -1px gray;
    box-shadow: 0px 3px 4px -1px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080');
}

i hope this will help you see the demo :-

http://jsfiddle.net/XZeYK/18/

And there are five values of box-shadow property as we can define :-

AS Example : -moz-box-shadow: 3px 3px 5px 6px #ccc;

  1. The horizontal offset 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.

  2. The vertical offset 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.

  3. The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

  4. The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).

  5. Color

Solution courtesy of: Shailender Arora

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS box-shadow in Firefox showing faint top border/shadow

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×