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.
Related
The HTML page shown below has four "buttons". Two of them are real button tags, but two are actually anchors (I deliberately left the underlining in their style so you can tell them apart). The goal was to style them using a btn class in a way that they look the same and align next to each other in a "button bar". But when you load the page in a browser, you will notice two differences between the buttons and the anchors - the buttons have a vertical offset, and their content is centered vertically. However, they use the same style class, and even when I compared the computed styles with browser developer tools, I could find no difference.
So why does this happen? I already found that not setting overflow and the height and instead adjusting it via padding and font-size can be used as a workaround. So it seems to have something to do with setting the height. But why do you get such an effect when you set it? And changing the overflow property strangely reverses the offset effect. I considered it might have to do with the box-sizing property which seems to be different for anchors and buttons, and could cause the height to be interpreted differently - but since there are no paddings and margins, it should not make a difference, it would also not alter the offset, and setting the box-sizing property manually for the class did not change the effect either.
Again, I'm not primiarly looking for a fix here, much less a discussion whether it's a good idea to style buttons and anchors the same, but I'm interested in a solid explanation of this CSS phenomenon. Is it a browser quirk with styling buttons? But then why do all the browsers (Firefox, Chrome, IE) show the same effect? Or did I overlook something obvious?
<!DOCTYPE html>
<html><head>
<style>
.btn {
margin: 0;
padding: 0;
overflow: hidden;
border: none;
outline: none;
background-color: grey;
color: white;
height: 2em;
width: 10em;
font-size: 20px;
font-family: sans-serif;
display: inline-block;
text-align: center;
}
</style>
</head><body>
<button type="submit" class="btn">
Button
</button><a href="#" class="btn">
Button
</a><button type="button" class="btn">
Button
</button><a href="#" class="btn">
Button
</a>
</body></html>
Since a button that has not been styled looks different than an anchor that hasn't been styled, if you apply the same style to both, there will be a difference. I think the only solution is to just apply different classes to the buttons, and to the anchors.
Ok, I think I found the answer myself:
I noticed that after adding vertical-align: middle; and line-height: 2em; to the btn class, the links and anchors will look exactly the same. You can then also remove the overflow: hidden.
The default values for these properties are vertical-align: baseline; and line-height: normal; - when you add these properties, the differences are still visible.
So I guess the deeper reason for this puzzle is a flaw in my underlying assumption that if the computed style properties, as shown in the developer tools, are the same, then two elements should also look the same. However, obviously there are settings with values like vertical-align: baseline; and line-height: normal; which do not have unambiguous meanings, instead they can have different meanings for different kinds of tags: E.g., where the baseline is and what a "normal" line height is, is defined differently for button and anchor tags.
I'm on FF 43.0.3, Mac OS 10.9.3. FF is cutting of the native checkbox on the right. It's not a css problem on my part; I confirmed the cutting off in CodePen. I also viewed a couple of random sites with checkmarks, and I see the same. I made sure to reset my browser zoom to default, and the default font is Times at 16px. I also tried turning off hardware acceleration via Preferences as another site suggested. Didn't work. The only code I have in my CodePen example is <input type="checkbox">
Would love to hear any suggestions.
This happens because of styling issues, and appears differently on different browsers. So try fixing the styling of the checkbox element and it's parent element, add some or all of these styles:
#parent-element { /*Or Whatever The ID Of The Parent Element Is*/
line-height: 20px;
height: 20px;
display: block
}
#checkbox-element { /*Or Whatever The ID Of The Checkbox Element Is*/
display: block;
height: 20px
}
Try changing the styles of the elements with different values to suit your needs.
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; }
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.
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