Question

I am trying to create a button with “caps” on either end, and a repeating background, in order to keep the button a flexible size.

In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button’s background-covered space (using negative values).

It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are “outside” the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements “out” of the button, so that they will render?

I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:

button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border:0;
    background-image: url(../images/btn_bg.png);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    position: relative;
    margin: 0 5px;
    vertical-align: top;

    &:before {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_left.png);
        width: 5px;
        position: absolute;
        left: -5px;
        top: 0;
        content: "";
    }

    &:after {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_right.png);
        width: 5px;
        position: absolute;
        right: -5px;
        top: 0;
        content: "";
    }
}

Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.

Answer 1

Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle

I swear I tried that already, but I guess not. Thanks to this question