When I set the css overflow: hidden property for elements with position: relative and with a border-radius set, everything works fine in all browsers, and in safari the internal protruding element is cut off as if the border-radius property is not set ...

Can you please tell me how to cure this problem for safari?

Here is an example that shows the problem:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> .ttitle { position: relative; top: 0px; left: 300px; height: 54px; width: 10160px; background-color: #0F0; overflow: hidden; } .tabs { width: 1010px; height: 580px; position: relative; background-color: #000; borderm-width: 0px; border-radius: 250px; border-style: solid; overflow: hidden !important; } </style> </head> <body> <divclass="tabs"> <divclass="ttitle"> </div> </div> </body> </html>
  • Use html5? - Qwertiy ♦

1 answer 1

http://jsfiddle.net/vn9bZ/

 .tabs{ width: 1010px; height: 580px; background: #000; border-style: solid; border-radius: 250px; overflow: hidden; } .ttitle{ margin-left: 300px; height: 54px; width: 10160px; background: #0F0; overflow: hidden; } 
 <div class="tabs"> <div class="ttitle" ></div> </div>

  • without position, it works, but I need to do something like this, so that c relativ and absolute would work .... I just have this element on the page positioned absolutely .... - shc345