title: div border overlapping button border, how to reverse it?
body: <p>I'm having a problem with css and borders. I have <a href="http://jsfiddle.net/LLVtr/" rel="nofollow">this example</a> working well, but I want <a href="http://jsfiddle.net/GfENx/" rel="nofollow">this one</a> working in the same way, I mean the ".current" buttom must have its right border (white) overlapping the ".simpleTabsContent" border, but it doesn't, it is behind the div border.</p>
  
  <p>I tried with z-index but I got no changes. I tried a lot of things but nothing worked.</p>
  
  <p>CSS code not working as I would like:</p>
  
  <pre><code>div.simpleTabs { width: 90px;float:left;padding: 0; }
  ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;}
  ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }
  ul.simpleTabsNavigation li button {
  margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D;
  padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold;
  text-decoration:none; font-family: Verdana; }
  ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
  ul.simpleTabsNavigation li button.current {
  background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;}
  div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }
  #msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px;}
  #container{ margin: 0; width: 500px; position: relative;}
  </code></pre>
  
  <p>CSS code working as I want:</p>
  
  <pre><code>div.simpleTabs { padding: 5px 0 0 5px; }
  ul.simpleTabsNavigation { margin:0 10px -1px 10px; padding:0; text-align:left; }
  ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
  ul.simpleTabsNavigation li button {
  color:#41635e; border:1px solid #6DA69D; padding:3px 6px; background:#b6d2ce;
  font-size:12px; font-weight: bold; text-decoration:none; font-family: Verdana; }
  ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
  ul.simpleTabsNavigation li button.current {
  background:#ffffff; color:#6da69d; border-bottom:1px solid #ffffff; }
  div.simpleTabsContent { border:1px solid #6DA69D; padding:5px 15px }
  #msg{ margin: 0 5px 5px 10px;}
  #container{ margin: 0; float: left; width: 450px;  position: relative;}
  </code></pre>
  
  <p>I would appreciate some help. Thank you.</p>