CSS issue with Firefox but works in Chrome

Question

Can somebody see if they can find what I'm looking over? It works great in Chrome 10 but doesn't work in Firefox 4. It's suppose to appear like a keyboard from the iPhone.

http://jsfiddle.net/pfqdr/

UPDATE: http://jsfiddle.net/pfqdr/6/ This is using fixed pixels instead of percentages as Chris suggested.

CSS

@font-face {
    font-family: 'iPhone keyboard';
    src: url(../font/iphone-keyboard.ttf);
}

.iphone-keyboard-taskbar {
  position: absolute;
    width:260px;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;
    bottom: 142px;
    background:#757D8A;
  background: -webkit-gradient(linear, left top, left bottom, from(#8c8c8c), to(#414141));
  background: -moz-linear-gradient(top,  #8c8c8c,  #414141);

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

#iphone-keyboard {
  position: absolute;
    width:260px;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;
    bottom: 0;
    background:#757D8A;
    background-image:-moz-linear-gradient(#9098A3, #454f5d);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d));

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

#iphone-keyboard li {
    text-align:center;
    margin:.5em .1em .25em;
    list-style:none;
}

#iphone-keyboard li:first-child {
    margin-top:.3em;
}

#iphone-keyboard button,
.iphone-keyboard-taskbar button,
#iphone-keyboard button.specialkey:active {
    color:#3A3D42;

    text-decoration:none;
    text-align:center;
    text-shadow:0 1px 1px white;
    font-weight:bold;

    border:0;
    border-top:1px solid rgba(255,255,255,.45);     

    background:#ECEDEF;
    background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));

    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
}

#iphone-keyboard button {
    display:inline-block;
    width:8.6%;
    margin:0 .25%;
    padding:.02em 0 .03em;

    color:black;

    font-size:22px;
    font-family:Helvetica, Arial, sans-serif;
}

#iphone-keyboard button:active,
#iphone-keyboard button.space:active {
    background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
}

#iphone-keyboard button.specialkey {
    background:#757D8A;
    background-image:-moz-linear-gradient(#7f8792, #535b68);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#7f8792), to(#535b68));
    color:white;
    text-shadow:0 -1px 1px rgba(0,0,0,.5);
}

#iphone-keyboard button.space,
#iphone-keyboard button.return,
#iphone-keyboard button.numbers,
#iphone-keyboard button.last_button {
    font-size:1.04em;
    padding:.25em 0;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.international,
#iphone-keyboard button.backspace {
    font-family:'iPhone keyboard', Helvetica, sans-serif;
}

#iphone-keyboard button.shift,
#iphone-keyboard button.backspace {
    background-image:-moz-linear-gradient(#939ba6, #687180);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#939ba6), to(#687180));
}

#iphone-keyboard button.shift {
    width:12%;
    float:left;
}

#iphone-keyboard button.backspace {
    width:12%;
    float:right;
}

#iphone-keyboard button.numbers {
    width:24.4%;
    margin-right:1.4%;
    float:left;
}

#iphone-keyboard button.last_button {
    width:16.2%;
    float:left;
    margin-right:1.4%;
}

#iphone-keyboard button.space {
    width:59%;
    color:#525c69;

    background-image:-moz-linear-gradient(#dddfe2, #b4b8bf);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#dddfe2), to(#b4b8bf));
}

#iphone-keyboard button.go {
    float:right;
    width:23.9%;
}

.iphone-keyboard-taskbar button {
  float: left;
  margin: 5px 9px 5px 3px;
  font-size: 9px;
  width: 60px;
  height: 23px;
  text-align: center;
  color: #fff;
  text-shadow: none;
  background: -webkit-gradient(linear, left top, left bottom, from(#8c8c8c), to(#414141));
  background: -moz-linear-gradient(top,  #8c8c8c,  #414141);
}

.iphone-keyboard-taskbar button.done {
  float: right;
  margin: 5px 3px 5px 3px;
  width: 40px;
  background: -webkit-gradient(linear, left top, left bottom, from(#91abc6), to(#5a7fab));
  background: -moz-linear-gradient(top,  #91abc6,  #5a7fab);
}

HTML

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="sample.css" />
  </head>
  <body>
                <ul id="iphone-keyboard">
                    <li>
                        <button type="button">Q</button>
                        <button type="button">W</button>
                        <button type="button">E</button>
                        <button type="button">R</button>
                        <button type="button">T</button>
                        <button type="button">Y</button>
                        <button type="button">U</button>
                        <button type="button">I</button>
                        <button type="button">O</button>
                        <button type="button">P</button>
                    </li>
                    <li>
                        <button type="button">A</button>
                        <button type="button">S</button>
                        <button type="button">D</button>
                        <button type="button">F</button>
                        <button type="button">G</button>
                        <button type="button">H</button>
                        <button type="button">J</button>
                        <button type="button">K</button>
                        <button type="button">L</button>
                    </li>
                    <li>
                        <button type="button" class="specialkey shift">S</button>
                        <button type="button">Z</button>
                        <button type="button">X</button>
                        <button type="button">C</button>
                        <button type="button">V</button>
                        <button type="button">B</button>
                        <button type="button">N</button>
                        <button type="button">M</button>
                        <button type="button" class="specialkey backspace">B</button>
                    </li>
                    <li>
                        <button type="button" class="specialkey numbers">@123</button>
                        <button type="button" class="last_button">.</button>
                        <button type="button" class="last_button">/</button>
                        <button type="button" class="last_button">.com</button>
                        <button type="button" class="specialkey go">GO</button>
                    </li>
                </ul>
  </body>
</html>

Answer 1

It looks like FF and Chrome handle fractional percentages differently. If you change your css for #iphone-keyboard button width to a px value, you might be able to find an appropriate medium that works on both browsers.

Old:

#iphone-keyboard button {
    display:inline-block;
    width:8.6%;
    margin:0 .25%;
    padding:.02em 0 .03em;

    color:black;

    font-size:22px;
    font-family:Helvetica, Arial, sans-serif;
}

New:

#iphone-keyboard button {
  display:inline-block;
  width:20px;
  margin:0 .25%;
  padding:.02em 0 .03em;
  color:black;
  font-size:22px;
  font-family:Helvetica, Arial, sans-serif;

}