0

I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.

Demonstration: http://jsfiddle.net/XV6pT/

The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.

There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.

The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.

It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.

Any hints?

Community
  • 1
  • 1
pdu
  • 10,295
  • 4
  • 58
  • 95

1 Answers1

1

Take a look at this: Creating a CSS3 box-shadow on all sides but one

It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.

Good luck!

Community
  • 1
  • 1
MrMerrick
  • 272
  • 2
  • 9