CSS расширяющиеся кнопки с Div

Question

Итак, у меня есть кнопка, которую я разрезал на три части, слева, повторяя среднюю и правую стороны.

Я поместил их в div так:

<a href="#">
    <div class="button_wrapper">
    <div class="left-corner">1</div>
    <div class="middle-bar">Kontakt</div>
    <div class="right-corner">3/div>
    </div>
</a>

и CSS это что-то вроде этого:

.button_wrapper { margin-right:25px; display:inline; }  
.button_wrapper:hover .left-corner { background:url(../images/menu_s_l.png) no-repeat; width:11px; height:21px; }
.button_wrapper:hover .middle-bar { background:url(../images/menu_m_bg.png) repeat-x;height:21px; }
.button_wrapper:hover .right-corner { background:url(../images/menu_s_r.png) no-repeat; width:11px; }

Что я делаю не так? : S

(и нет, я не могу использовать радиус границы :(, он был, а потом мне сказали, что он нужен для работы в Ie8)

edit: результат, который я получаю, выглядит примерно так:

Answer 1

Я предполагаю, что вы делаете, но просто чтобы проверить, есть ли у вас части кнопки float:left?