The specified height for input[type=button] in Firefox/Safari is adjusted by subtracting the padding and border

When implementing the following CSS:

input[type=button] {
  background-color: white;
  border: 1px solid black;
  font-size: 15px;
  height: 20px;
  padding: 7px;
}

along with this HTML:

<input type="button" value="Foo" />

I anticipate that the total height will be 36px:

1px  border
7px  padding
20px content (with 15px text)
7px  padding
1px  border

However, in both Firefox 3.6 and Safari 4, I observe the following display: (Testing not done on other browsers)

Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border

Can anyone explain why this discrepancy occurs?

(Even if it's intentional behavior, what is the reasoning behind it?)

htmlcssheightpadding

Answer №1

For a long time, form elements have been designed with a specific width/height that accounts for their padding and border. This is because they were originally created as OS-native UI widgets by browsers, which meant CSS couldn't control the appearance of these elements.

To maintain this traditional behavior, Firefox and other browsers render certain form fields (selects, buttons, input-type-buttons) with the CSS3 box-sizing property set to border-box. As a result, the width property includes the entire width of the element, including the border and padding.

If you want to disable this default setting, you can use the following code:

select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

In cases where you are creating fluid layouts and need elements to be '100%' width, it's common to set the others to border-box.

The vendor-prefixed versions (-moz-box-sizing, -webkit-box-sizing) are included to support older browsers that implemented this feature before standardization. Note that this method may not work on IE6-7.

Answer №2

Here are some tips to consider:

  • Make sure to declare the correct doctype for your document (<!DOCTYPE html>)
  • Adjust the input display property to either display:block or display: inline-block
  • Consider using a reset stylesheet.

Answer №3

The reason for the discrepancy is that the element's height is inherently greater than what you specified. Input elements come with a predefined height that is typically sufficient to display the content, yet you attempted to constrain it to a lesser size. To visually illustrate this point, try eliminating your height directive.

Answer №4

After making some adjustments, I successfully resolved the issue by eliminating the padding from the input button and establishing a height of about 20 units. Additionally, I fine-tuned the height and padding of the anchor element, as well as adjusted the line-height, font-size, and font-family.

I'm pleased to report that these modifications were effective across Firefox, Internet Explorer, Safari, and Chrome! 😄

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

Challenges with Hangman in JavaScript

As a beginner in JavaScript, I recently developed a simple hangman-like game. However, I encountered some challenges that I need help with. One issue is related to my lettersGuessed array. Currently, the array displays every time a key is pressed and repea ...

javascriptjqueryhtml

What is the best way to specify the dimensions of an image with CSS or Bootstrap?

I am facing some challenges while building my website. The ideal look of the page is represented by home_page_ideal. The issue arises with the small boxed image on the top left corner. Once I scroll to the top, the page displays as home_page_issue. The CSS ...

htmlcsstwitter-bootstrap

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...

javascripthtmlvb.netawesomium

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

htmlangulartypescript

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

htmlcssbootstrap-4bootstrap-5

Client-side resizing an image before sending it to PHP for uploading

Greetings! Currently, I am utilizing a JavaScript library from this source to resize images on the client-side. The image resizing process works successfully with the following code: document.getElementById('foto_select').onchange = function( ...

javascriptphpjqueryhtmlajax

Using jQuery to create an array variable and Passing the array to a different PHP page

Although I have managed to create a function that works perfectly for me, I am facing an issue with the jQuery part at the bottom. Currently, I am only able to trigger an alert message and not store the data as a real variable. The function is functionin ...

javascriptphpjqueryhtmljson

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

htmlcssinternet-explorerbootstrap-4navbar

Conflicting events arising between the onMouseUp and onClick functions

I have a scrollbar on my page that I want to scroll by 40px when a button is clicked. Additionally, I want the scrolling to be continuous while holding down the same button. To achieve this functionality, I implemented an onClick event for a single 40px s ...

javascripthtmlreactjstypescriptresponsive-design

Is it possible to use WHILE loops twice in PHP?

Just starting out with PHP and hoping for some assistance. I have a MySQL database table with columns for "id", "img", "link", and "desc". My goal is to echo all of this data in the following format: <div id="featured"> <a target='_b ...

phphtmlloops

Incorrect icon being displayed for PHP validation

Seeking guidance in PHP as a newcomer. Attempting to display an error icon upon validation failure. PHP <?php // Initialize variables and set them as empty values $nameErr = ""; $name = ""; if ($_SERVER["REQUEST_METHOD"] = ...

phphtmljquery

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

jqueryhtmlcss

When the button/link is clicked, I must dynamically create a modal popup that includes a user control

I am currently working on improving an asp.net web forms website by incorporating popup modals to display the rental rates for available equipment. The challenge arises when dealing with pages where each piece of equipment has different rates, requiring a ...

javascriptc#htmlbootstrap-4

Difficulty encountered while setting up jQuery slider

I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...

javascriptjquerycsshtml

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

Using Node JS and Express to deliver a static HTML page with an embedded image

I have successfully set up a system where I can serve static HTML pages using express. I have also installed "ejs" to render the page with data from local variables in my .js file. The only issue I am facing is displaying a small logo in the corner of the ...

htmlnode.jsexpressejs

The hyperlink is malfunctioning

Seeking assistance with this issue. The menu items below (Get on Amazon etc) are able to change the information displayed on the page, however, the first menu should redirect to my index page but it's not working for some reason. <!DOCTYPE html> ...

htmlhref

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

javascripthtmljquerycss

Connect and interact with others through the Share Dialogues feature in the

Update - Edit I'm just starting to explore the concept of share dialogues and I want to integrate it into my website. On my site, there is a reaction timer game that shows the user's reaction time in seconds in a modal popup. I want users to be ...

javascripthtmljqueryfacebookshare