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

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

jquerycsszurb-foundationzurb-foundation-6

Clicking on a hyperlink within an Angular Material button does not prompt the browser to navigate to the linked page

Currently, I am utilizing Angular Material with AngularJS v1. Encountering issues with a simplistic menu bar while utilizing angular material. Below is the piece of HTML code representing the menu bar: <md-toolbar layout="row" class="md-whiteframe-z3" ...

htmlangularjsbuttonangular-material

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

javascripthtmlspotify

The wrap() method in jQuery clones elements multiple times

I have created a simple function that wraps a div tag inside another div tag when the browser window exceeds a certain width of x pixels. However, I've encountered a strange bug when resizing the page more than once. Let me share with you the jQuery ...

javascriptjqueryhtml

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

cssangularbindingstyles

Activate a side navigation bar in AdminLTE-3

I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...

phphtmlcssadminlte

The Ultimate Guide to Setting up SVG's Viewbox, Width, and Height for Scalability and Responsiveness

As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices. I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsin ...

htmlcsssvg

Can I receive a PHP echo/response in Ajax without using the post method in Ajax?

Is it feasible to use Ajax for posting a form containing text and images through an HTML form, and receiving the response back via Ajax? Steps 1.) Include the form in HTML with a submit button. 2.) Submit the form to PHP, where it will process and upload ...

javascripthtmlajax

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

I am looking to design an SVG circle with a fading stroke that blends into the background and features an arrow at one end. The goal is for the ring to fade out completely right above the arrow, similar to the visual reference provided in the image.view ex ...

javascripthtmlcssd3.jssvg

What is the best way to position this grid container directly beneath the search box using absolute positioning?

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique Starter</title> ...

htmlcss

Having trouble with clicking on an icon link within a list

Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...

htmlcsshovericons

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...

htmlcssmobileflexboxresponsive

Step-by-step guide: Crafting an UP Arrow solely with HTML and CSS

What is the method to utilize solely HTML and CSS for creating a triangle? I am in need of constructing a thick triangle, but want to achieve this using only CSS So far, I have experimented with the following code: .arrow-up { width: 0; height: 0 ...

htmlcss

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

javascripthtmlcsswebgl

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular