Question

#keyboard {
position: fixed;
background: #eee;
display: none;
border: 1px solid #ccc;
border-radius:7px;
width: 950px;
height: 300px;
padding: 5px;
cursor: move;
background-image:url('BackgroundImage.jpg');
box-shadow: -5px -5px 5px 5px #888; 
-moz-border-radius: -5px -5px 5px 5px #888;
-webkit-border-radius: -5px -5px 5px 5px #888;

}

At upper css code, it is okey at Firfox browser.
But I cannot display shadow at IE8 or IE6 and safari as well.

box-shadow: -5px -5px 5px 5px #888; 

Please let me know the solution.

Answer 1

To offer IE users an effect similar to box-shadow, I usually make use of proprietary MS filters, the following is an extract from my css:

-moz-box-shadow: 2px 4px 19px #333333;
-webkit-box-shadow: 2px 4px 19px #333333;
box-shadow: 2px 4px 19px #333333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=115, Color='#333333');

Obviously the effect on IE is different, but playing with the various parameters you can get very closer (or at least acceptable) to your expectation on every browser