0

Hi to all,

I am PHP developer and found many problems regarding cross browser issue.
Here's the problem:
I want a rounded div with shadow. My CSS codes works at FF but not in google chrome. Please help. Thanks in advance.


Here's my code:

<style type='text/css'>

.main{float:none;position:relative;width:980;background:white;height:500;margin:0px auto;top:10;}

#shadowBox
{
-moz-border-radius: 1em 0em 1em 0em;
border-radius: 1em 0em 1em 0em;

-moz-box-shadow: 3px 3px 3px 5px #bbb;
-webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;
}

</style>

<div class='main' id='ShadowBox'>

</div>
2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by Kraai
0

webkit needs a border radius as well, you only have the shadow on it. This is for the mac users using safari browsers etc.

-webkit-border-radius: 1em 0em 1em 0em;
0

Try to use px in the place of em and see if that can work. Make it something like this:

-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
border-radius: 5px;

and

-moz-box-shadow: 3px 3px 3px 5px #bbb;
 -webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.