CODEWITHSUNDEEP
css
Ed Ward
Ed Ward

Reputation: 17

CSS Rounded Corners Not Working in Safari/Opera

I am new at CSS but am trying to learn front-end coding. I've searched a lot of different sites including this one to try and find why my rounded corners aren't working in Safari or Opera. My code already included most of what was suggested, and other's didn't seem to apply to my situation. I'm on a Mac (10.6.8). Works fine in Mozilla, IE9 & Chrome. It's a conatiner DIV that holds a swf. Here is the code:

#container {
  height: 600px;
  width: 955px;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 18px;
  -webkit-border-bottom-right-radius: 18px;
  -webkit-border-top-left-radius: 18px;
  -o-border-bottom-right-radius: 18px;
  -o-border-top-left-radius: 18px;
  -moz-border-radius-bottomright: 18px;
  -moz-border-radius-topleft: 18px;
}

Here's a link to my site: www.mentalwarddesign.net

I've also tried (for the heck of it) indicating "0" values on the 2 corners I don't want affected. In addition I've tried "border-radius: 18px" to simply round all corners. Both with the same effect of working in all but Safari & Opera (well, IE 6-8 too of course). It must be something simple. If I've missed this question answered here before, please forgive me and point me in the right direction. The closest post I found here was this one: CSS rounded corners bug in Safari? but I didn't find anything helpful there.

Upvotes: 1

Views: 1153

Answers (2)

mancer
mancer

Reputation: 39

Here you can find working version with code...

http://www.css3maker.com/

http://css3please.com/

Upvotes: 1

Eric
Eric

Reputation: 97575

Looks like it's actually a case of the flash player not complying with overflow: hidden. Presumably, it works with text in place of the swf?

IIRC, you have to add a wmode <param /> to the swf:

<param name="wmode" value="transparent">

Upvotes: 0

Related Questions