On this page there's a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don't understand why because they both have the same:
font-size
top and bottom border sizes
top and bottom padding sizes
I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?
Update
I'm not bothered about supporting IE <= 7
You have to define height of your buttons.
of Write like this:
a.primaryAction, .primaryAction.matchLink {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
font-size: 13px;
font-weight: normal;
height: 30px;
padding: 5px 11px;
text-decoration: none;
}
You should apply display: inline-block to the a, to match the button which already has display: inline-block.
You also need this to remove the extra spacing in Firefox:
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
This kind of problem can be a real hassle to solve.
Only block elements accept a height. You can use either display:block or display:inline-block to achieve this.
At first, display:inline-block; seems like it's a nice, easy way to go - but is not supported in IE7 or earlier.
So, you can either use inline-block and leave old browsers in the wake, or add a conditional stylesheet for ie7, or you can display:block and give them a width (if it's appropriate).
The following CSS rule would work in your case:
.buttonHolder * { height:17px; }
Related
While assembling a site, I discovered that it's quite complicated to get buttons work with other elements, so that all elements look all the same.
That happens for example in a menu, where some buttons are real buttons, while other are just HTML links to other pages. Other example may be a form, where buttons are expected to be as large as other inputs.
Please see my jsFiddle to understand what I'm talking about. In the example, I want button to look like other elements!
Some code since SO requests it:
HTML:
Both elements shole be of the same size
<div id="menulike">
<button>DO SOMETHING</button>
GO TO SOMETHING
</div>
CSS:
div#menulike button, div#menulike a {
/*reset some default styles*/
border-style: none;
border-width: 0px;
text-decoration: none;
/*Inline or inline-block*/
display: inline;
display: inline-block;
/*colors and stuff*/
color: white;
font-weight: bold;
background: black;
/*This is important - size is expected to be the same*/
padding: 3px;
margin: 1px;
width: 220px;
font-size: 12pt;
text-align: center;
}
Why does this happen?
The reason your elements do not look the same when applying the same styling is due to default styling applied on elements. This is due to the elements being different. The differences may also be different depending on the browser.
How do you fix this?
You simply need to override all the properties that are different between elements. A lot of the differences between browsers can be solved with CSS resets.
Why isn't my example working?
Regarding your particular issue, the button has different width because you are not overriding all of the button's CSS properties. Try adding the following to your text inputs:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
This should give them all the same width. Alternatively, you can give your button box-sizing: content-box, which is the default for most elements.
As for the difference between the button and link, all I can see is the cursor icon when you hover over them. This can be changed with the cursor property:
cursor: default;
Edit:
I just noticed the second example has different heights for the button and link in Firefox (I was using Chrome before, which didn't show it). I believe this is combination of both height and box-sizing. Setting both to the same value for the elements should give them the same size.
I'm only guessing, but I think the reason height is needed in this case is because the font is treated differently between buttons and links in FF. Since no height was set, the fonts took up different amounts of space in the two elements, even if it was the same font with same font size.
I'm not sure, but the form elements (buttons, select, radio buttons) are provided by the browser. Each browser/OS have an way to show it. So I think you need to write a separated css block for it.
I can't figure out why the select element has a larger height than input[type="text"].
I thought that line-height controlled the height of inline elements like select and input, but it appears to work slightly different for the select element.
Example: http://jsfiddle.net/Dismissile/mnBsV/
I am setting the following style:
input[type="text"], select {
padding: 2px;
border: 1px solid #ccc;
margin: 0;
line-height: 16px;
font-size: 14px;
}
I would think that the elements would behave as such:
16px + 4px + 2px (line-height + padding + border) = 22px
This is what it does for the input, but the select is doing:
18px + 4px + 2px
Where is it getting the 18px from? Why aren't they consistent? Tested this in both IE8 and Chrome 15.
I couldn't find any explicit references to how high the form elements should be but in http://www.w3.org/TR/css3-ui/#appendix D they do mention the default height of a select is
select[size] {
appearance: list-menu;
display: inline-block;
height: attr(size,em);
}
It gets its height form the font size, whereas every other input has the same style attributes. So it is valid to have a select be a different height from all the other elements. However there is no standard that I could find to define them anyway (Note how the link says it is informative not normative).
So they are different sizes because nobody said they should be the same size.
I was able to get your code to work.
The trick is to:
Set the display to block so that the height property is used.
Set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
Example
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Please see your updated jsFiddle.
The select components has an implicit button with outset border, the solution is use height and box-sizing: border-box.
I came across a version of the same problem. In my context, it was enough to hard code some padding into the select element:
.select-element { padding-bottom: 6px; }
Note: The following also had the same effect but caused additional problems:
.select-element { height: calc(100% - 18px); }
With that second alternative, once a form error came in and a new ul element was inserted after the select element (all of which is inside a flex container), the height was no longer correct. That issue does not arise using the first option.
Hope this helps someone...
Im trying to style a link and a button equal.
Why are <button> and <a> rendered diffently in FF with the below css declaration: (notice the outer border on corners of the button and the different height and length of the two). In Chrome they are rendering equal but have an outer border. In IE they are rendered equal but with no rounded borders (IE8 that is, not supporting border-radius).
Heres a jsfiddle version and heres the css
button, a
{
background-color: #7da7d8;
color: #e7e4ed;
border: 3px solid #f7f7f7;
border-radius: 8px 8px 8px 8px;
text-align:center;
font-weight: normal;
display: inline-block;
line-height: 1.2em;
margin: 4px;
width: 120px;
padding: 6px;
font-size:1.2em;
text-decoration:none;
cursor: pointer;
}
Please, dont comment on the usability issues for doing this - I have my reasons.
---------- update ---------------
From comments below Ive updated the css, check it out on jsfiddle Now I only miss to set the height equal and somehow get rid of that corner border...
Short answer: browsers render real form elements (buttons, etc) and text hyperlinks differently.
There are some things you can further change to make browsers render these elements more similarly. There are other things that you can't change, however, so you might not be able to achieve pixel-identical styles.
Most notably, the different lengths between the button and the a are caused by different box models used for rendering them. Buttons usually use border-box while almost everything else uses content-box (the original W3C box model). You can resolve that by adding a box-sizing style:
/* Or border-box */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
Another thing: form elements do not inherit font styles from their containing elements; you need to set the font styles on those elements themselves to change the way fonts are rendered in them.
Regarding your updated fiddle, that's a browser-specific discrepancy and I don't think there's anything you can do about it. Like I said, you might not be able to achieve pixel-identical styles.
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.
After reading the thread
Input size vs width
I'm clear that we should not use size attribute but css style.
What will be the cross browser css that shows exactly same width for both input[text] and textarea?
BTB, I tried
#idInputText, #idTextArea {
font: inherit;
width: 60ex;
}
Is it correct? any better solution?
Thanks in advance for any help.
You will probably get more consistent results with different browsers by applying a CSS reset first. This article lists some good examples:
https://stackoverflow.com/questions/116754/best-css-reset
Once you have eliminated the subtle browser differences on padding and margins, then your master width of 60ex should allow the inputs to line up.
The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.
#form input.textfield { width:10em; }
#form textarea { width:9em; }
Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.
I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.
I would avoid a generic CSS reset, but use something like this:
input[type="text"], input[type="password"], textarea {
width: 60ex;
margin: 0;
padding: 2px; /* it's best to have a little padding */
border: 1px solid #ccc; /* gets around varying border styles */
border-radius: 4px /* optional; for newer browsers */
}
As long as you're in standards mode and not quirks mode this should work fine for most browsers.
Notes:
The attribute selectors - [type="text"] - don't work in IE6 so you may wish to opt for a class name instead.
You can't get all browsers to display form fields exactly the same way.
Using ex as the unit, whilst a good idea, might not work well in a fixed-pixel width environment.
Use pixel rather than EM or pct values. 60px = 60px across all browsers, regardless of base font size.
I'm late to this party, but in case anyone runs into this and needs to use ex's for width, I finally got it to work.
Textareas by default use monospace for their font-family. So, you'll need to override that. This css worked for me:
input[type="text"], textarea {
font-family: Arial, sans-serif;
border: 2px groove;
padding: 2px;
margin: 10px;
width: 35ex;
}
Here's a Fiddle to demonstrate: https://jsfiddle.net/Lxahau9c/
padding left and right 0px