`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

Selenium Grid: Unable to locate the DevToolsActivePort file (error: Chrome did not launch successfully and exited abnormally)

Recently, I decided to use Selenium Grid to automate some tests. To make the process more efficient, I set up VMs running on a LINUX Platform (one acting as a Selenium hub and others as Selenium nodes). The standalone server started without any issues in b ...

javalinuxgoogle-chromeselenium-webdriverselenium-chromedriver

Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...

htmlcsstwitter-bootstrap

How can jQuery select an element by its id attribute by referencing the href attribute of a different element?

Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements t ...

jquerycss

Setting a default value within an input tag: A step-by-step guide

const [userData, setUserData] = useState([]); const handleUserInfo = (id) => { fetch(`https://602e7c2c4410730017c50b9d.mockapi.io/users/${id}`) .then(res => res.json()) .then(data => setUserData(data)) } <inpu ...

javascripthtmlreactjs

Angular2: dynamic spinner directive for showing progress/loading overlay

Struggling to implement a loading indicator/overlay in Angular2 that can be added to any container div. When the boolean property isLoading changes, I want the div to grey out and display a spinning indicator, then revert back when the property changes. I ...

javascripthtmlangular

Minimizing Unused Space After Media Query Adjustment

Using the bootstrap grid system, I am facing some uncertainties. I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above. In my current setu ...

csstwitter-bootstrapmedia-queries

Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS

I am currently learning HTML, CSS, and JavaScript. I am in the process of building my very first website, but I have encountered a problem. I am struggling to change the background color within the container beneath the images to a specific color (#82b5cf) ...

htmlcsssass

Centering an Image of Unspecified Dimensions Both Vertically and Horizontally with Hover Effect on Anchor

To achieve both horizontal and vertical centering of an image with unknown dimensions, I need to use max-width and max-height to constrain it within a container size of 101x84. Additionally, I want the image to display an icon in the middle when hovered ov ...

htmlcss

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

htmlcssangularbootstrap-5bootstrap-icons

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

cssimageheader

What is the method for setting up vertical tabs?

Is it possible for someone to provide guidance on how to create vertical tabs for the HTML content below? When a tab, such as tab1 in the left column, is clicked, only the content of tab1 should be displayed in the middle column. The same applies for tab2 ...

jqueryhtmlcssjquery-ui

What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends out ...

htmlcssbootstrap-4

The iframe came to a halt as soon as it was no

I am currently developing a live video website that utilizes third-party tools to play the videos. To simplify things, I have embedded all the components required for live video into a single HTML page. Here is how it looks: <iframe data-v-140cfad2= ...

javascripthtmldomiframevue.js

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

Uploading Images Dynamically with Ajax and jQuery in PHP

[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...

javascriptphpjqueryhtmlajax

Expanding Beyond Boundaries: Utilizing CSS to Overflow From a Div and Fill the Entire Screen

I have a main DIV that acts as part of my responsive layout grid. It grows to the maximum width I've set, which is 1280px, and then adds margins for larger devices. Below you'll find my CSS along with a snippet of Less code. .container { mar ...

css

Guide to retrieving a file stored locally with VueJS

Currently, I am working on an upload system and I want to provide users with a sample template. The template is stored locally in a subfolder within the assets directory. My goal is to access this template in my VueJS component and display a link to it on ...

htmlcsvdownloadvue.js

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

The incorrect indentation issue occurs when the text wraps around

I am looking to automatically indent wrapped contents based on the first line. To achieve this, I implemented the following HTML and CSS code: li { padding-left: 10px; text-indent: 10px; } .Slides { width: 20em; //Display wrap-around } <div cla ...

htmlcss

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

javascriptphphtmlcss