9

I'm trying to develop slide box which have border radius in parent div. It works fine with Firefox but got problem in safari and chrome.

The problem is that child element overlaps rounded border of parent div.

You can see the example at http://jsfiddle.net/7KgEh/6/. Have a look in safari, chrome and firefox; you'll see difference in the right side the child div is overlapping rounded border of parent div.

I searched internet but most of post pointed it as webkit bug. Anybody knows the solution?

krozero
  • 5,929
  • 3
  • 21
  • 33

3 Answers3

27

Simply add overflow: hidden; to the container element with the rounded borders.

arik
  • 28,170
  • 36
  • 100
  • 156
0

the rounded corner is working fine, it's just taking width:100% (of page) for <div class='box'>, hence you cannot see it. try width:50% and you will see what I'm saying. Here try this jsfiddle

Teena Thomas
  • 5,139
  • 1
  • 13
  • 17
  • as i said above, i'm trying to develop slide box that moves from right to left not inner div that stay withoud movement. may be this will explain more clearly. http://jsfiddle.net/7KgEh/21/. explained here http://screencast.com/t/vc65k0QK. it works fine in firefox just works differently in chrome and safari. – krozero Sep 19 '12 at 19:16
0

If you don't need to interact with that background you could just bury it with z-index:

http://jsfiddle.net/7KgEh/23/

Bury the background and move the button up to be a sibling of it and write the extra line to keep them aligned. If this is for display purposes this will overall be more flexible (also allowing for things like the button overlapping the slot). If there are structural reasons then another option may be better.

Matt Whipple
  • 7,034
  • 1
  • 23
  • 34
  • thanks, that nearly worked but got another problem i cant click I-Btn. now it is overlaped by parent div. there is slide animation that works when I-Btn is clicked( slide not available in jfiddle. just assumption). the I-Btn should be click-able to make slid work. – krozero Sep 19 '12 at 19:56
  • You need to separate I-Btn so it's not in the box anymore, and then just animate the 2 together. Ao whatever your animation code is just apply it to both elements or write code that attaches one event to the other. – Matt Whipple Sep 19 '12 at 20:05
  • that's not only one button. the option box also contains bunch of other buttons which should be click-able. – krozero Sep 19 '12 at 20:13
  • Then place them all in a box that doesn't have styling and then animate those 2 elements together instead (the background display box and the foreground "real" but non-styled container). – Matt Whipple Sep 19 '12 at 20:22