Question

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

Answer 1

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