title: CSS expanding buttons with Divs
body: <p>So I have a button that I have cut in three parts, left, repeating middle and right side.</p>
  
  <p>I placed them in divs like this:</p>
  
  <pre><code>&lt;a href="#"&gt;
      &lt;div class="button_wrapper"&gt;
      &lt;div class="left-corner"&gt;1&lt;/div&gt;
      &lt;div class="middle-bar"&gt;Kontakt&lt;/div&gt;
      &lt;div class="right-corner"&gt;3/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>and CSS is something like this:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>What am I doing wrong? :S</p>
  
  <p>(and no I can't use border radius :(, had it and then they told me they need it to work in Ie8)</p>
  
  <p>edit: result I'm getting is something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/nn5wd.jpg" alt="broken menu"></p>