title: HTML's input type = button not clickable in chrome?
body: <p>I've got the problem that a few buttons are only clickable in the upper ~25% of the button, the pointer doesn't appear anywhere below this mark.<br>
  I tried some things and when I changed it in CSS to <code>display: block</code> and the whole button became clickable again, but when I tried <code>display: inline-block</code> it bugs again beeing not clickable.  </p>
  
  <p>However this <strong>only</strong> happens in Chrome, works fine in IE and Firefox. And the <strong>back</strong> button works aswell as whole, just those three asigned to class <em>buttonRot</em> ain't working.. Whats wrong here?</p>
  
  <p>Here's my code : 
  [HTML]</p>
  
  <pre><code>&lt;form method="POST" action="zumtesten7.php" style="background-color:white"&gt;
  &lt;input type="button" value="Jetzt freigeben" name="Speichern" onClick="doSubmit(this.form,&lt;?php echo (int) $intSNr.','.$BuchungsNr ?&gt;)" class="buttonRot"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &lt;input type="button" value="Stornieren" name="Storno" onClick="doStorno(this.form,&lt;?php echo $intSNr.','.$BuchungsNr ?&gt;)" class="buttonRot"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &lt;input type="button" value="Seite drucken" name="Drucken" onClick="javascript:window.print()" class="buttonRot"&gt;
  &lt;input type="button" value="Zurück" name="Back" onClick="javascript:window.location.href='zumtesten6.php?SNr=&lt;?php echo $intSNr;?&gt;'" class="buttonBlau"  style="margin-left: 592px;margin-top:-20px"&gt;
  </code></pre>
  
  <p>[CSS]</p>
  
  <pre><code>.buttonRot {
      padding: 0 5px;
      border: 0;
      box-shadow: 2px 2px 2px #000;
      text-shadow: 1px 1px 1px #000;
      width:auto;
      height:22px;
      cursor:pointer;
      font-weight:bold;
      background-color:#cc0000;
      color:#ffffff;
  }
  
  .buttonBlau is the same just with  
  
  background-color:#00aaee;
  </code></pre>
  
  <p>I guess it has to do something with the form?<br>
  I changed the bg-color at the first line to black to be visible and only the 3 red ones were in it.<br>
  Those are the bugged ones, the blue wasn't in it and works.  </p>
  
  <p>Edit: This <strong>marked area</strong> is clickable <a href="http://imgur.com/MJ0vIwT" rel="nofollow">http://imgur.com/MJ0vIwT</a> and the outer bottom line of the button,<br>
  but you have to be super pixel-precise..<br>
  Edit 2 : Tried to increase the padding, which was clickable.. 
  Seems like the text isn't clickable, the padding top and bottom are clickable. I'm confused.</p>
  
  <p><strong>Seems like I got rid of it</strong> after <code>&lt;/td&gt;&lt;/tr&gt;</code>'ing after the 3 red buttons and opening new ones for the blue one. I don't know how but it's clickable as whole again.. worked aswell after I tried to remove the margin only. Sometimes programming is confusing. :( </p>