0

I've just run into an interesting problem. I have 3 divs positioned next to each other with display:inline-block and with width:32%. All of them has a button inside which have box-shadow sets.

Output:

https://i.stack.imgur.com/whdXa.jpg

As you can see on the first picture there are shadows on the 1st and on the 3rd button, but the shadow's direction differs from the 2nd button's.

I've checked everything in the debugger, they have the same box-shadow setup.

If I change the inline-block to inline just for testing (second picture), the shadows are get into the same (right) direction, but - of course - there are problems with the widths.

I need to put the 3 buttons next to each other.

Please help :)

Thanks in advance!

err
  • 109
  • 2
  • 7
  • can you put together a demo on http://jsfiddle.net or by using the snippet editor on stackoverflow? We need to see the code in order to help you better. – Joseph Marikle Nov 12 '15 at 20:45
  • Thanks for your tip. I've rebuilt everything from zero, and got the solution. (Edit: posted with Enter key, sorry. I'm a noobie here :)) So, JSFiddle is here: https://jsfiddle.net/bt4jvr8k/ The problem was the "col-3" div's "overflow:hidden". Same problem was with the button's "overflow:hidden", but it just crops the shadows from the sides. – err Nov 13 '15 at 21:11

1 Answers1

0

I've got it:

JSFiddle: jsfiddle.net/bt4jvr8k

The problem was the "col-3" div's "overflow:hidden".

Almost same problem was with the button's "overflow:hidden", but it just crops the shadows from the sides, while the div's crops from the bottoms as well.

err
  • 109
  • 2
  • 7