`Problem with CSS in Firefox, functions properly in Chrome`

Can someone please check to see if they can find what I'm overlooking? It's working perfectly in Chrome 10 but not in Firefox 4. The aim is for it to look like an iPhone keyboard.

http://jsfiddle.net/pfqdr/

UPDATE: http://jsfiddle.net/pfqdr/6/ I have updated it using fixed pixels instead of percentages as suggested by Chris.

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

Answer №1

It appears that fractional percentages are handled differently by FF and Chrome. If you adjust the CSS for #iphone-keyboard button width to a pixel value, you may find a suitable compromise that works on both browsers.

Original code:

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

Updated code:

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

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

javascripthtmlcsspdfjspdf

Step-by-step guide to positioning an iframe with 'transform:scale' on the left side

Recently, I encountered an issue with an iframe in my project. Initially, without any 'transform:scale' css applied, it displayed on the top-left side of the div as expected. However, after adding -webkit-transform:scale(0.6,1); margin-left:0.0e ...

htmlcssiframe

Is there a way to horizontally align text in a div using center alignment?

Excuse me for what might seem like a silly question, but I am having trouble figuring this out. Edit: All I want is to horizontally center the text without affecting the image's position. The image should stay aligned with the baseline of the text. ...

css

Is it possible to convert a blob to an image file using the FileReader in HTML

client side code <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; fun ...

phpjavascripthtml

The width of table columns is altered upon the second rendering in JQuery DataTables

Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...

htmljquerycssajaxdatatables

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

javascriptphphtmlgoogle-signin

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

The system is unable to retrieve the value of the property which is set as null

I'm trying to figure out how to store the input value of name_enter into the variable userName. However, every time I attempt this, I encounter the following console error: Uncaught TypeError: Cannot read property 'value' of null function ...

javascripthtmlcss

Ways to incorporate a scroll feature and display an iframe using JQuery

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...

javascripthtmljquerycssiframe

Typewriter Effect: The caret is advancing too quickly

I am trying to achieve a typewriter effect on my text, but the blinking cursor is extending further than the actual text. See Image for Problem Here is the code I am using: HTML: <div class="title"> <h1>Hi, I'm ConnerDE< ...

htmlcss

Leveraging moment.format Function in Angular within an HTML Context

Is there a way to implement the moment.format method in HTML? Currently, I am utilizing the toLocaleDateString method to showcase an array of dates: <ng-template let-event> <div>{{event.date.toLocaleDateString(' ...

htmlangulartypescriptdatemomentjs

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

javascriptjquerycssresponsive-slides

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

jqueryhtmlcss

Click to add a different template into the document

My HTML page consists of a form with multiple input fields and a carousel. Towards the bottom of the form, there is a button labeled Add another quote. This button essentially duplicates the input fields above (all contained within class="quote"). Here&ap ...

javascriptjqueryhtmlangularjsangularjs-directive

Customize the border style for the span element

I attempted to use the code below in JavaScript/jQuery to adjust the border thickness. Unfortunately, it seems to be ineffective. Can someone please assist me? //$("span").css({"border":"4px solid green"}); document.getElementById("192.168.42.151:8984_ ...

javascriptjqueryhtmlcss

Shifting text higher to the <h1> tag using CSS

I'm currently attempting to move the paragraph header closer to my h1 title. I'm struggling with incorporating the position function and have tried using padding without success. On the image, I am aiming to position the text "Where every connec ...

csstext

In PowerShell, use the "ConvertTo-Html" commandlet to incorporate

I have a script that retrieves data from a server, converts it to HTML, and then sends the report via email. Here is a snippet of the script: $sourceFile = "log.log" $targetFile = "log.html" $file = Get-Content $sourceFile $fileLine = @() foreach ($Line i ...

htmlcssclasspowershell

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

htmlcss

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

javascripthtml

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap