CODEWITHSUNDEEP
cssbuttonhtml
Matija Milković
Matija Milković

Reputation: 2458

CSS expanding buttons with Divs

So I have a button that I have cut in three parts, left, repeating middle and right side.

I placed them in divs like this:

<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>

and CSS is something like this:

.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; }

What am I doing wrong? :S

(and no I can't use border radius :(, had it and then they told me they need it to work in Ie8)

edit: result I'm getting is something like this:

broken menu

Upvotes: 0

Views: 1273

Answers (1)

mowwwalker
mowwwalker

Reputation: 17382

I'm assuming you do, but just to verify, do you have the button pieces float:left ?

Upvotes: 1

Related Questions