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
Related
In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?
To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.
Copy and paste the CSS Reset script at http://cssreset.com
Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):
texarea {
width: 400px;
height: 100px;
padding: 0;
border: 1px solid #999;
margin: 0;
}
Hope this helps.
Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):
<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">
Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.
Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.
You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):
textarea { padding: 2px; border-width: 1px; }
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.
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 an input field:
<input type="text" placeholder="whatever">
with styles:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
Thanks
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
::-webkit-input-placeholder { line-height: normal; }
Looking at your tags, I'm assuming you are writing something like...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.
I am losing hair on this one ... it seems that when I fix width an HTML SELECT control it renders its width differently depending on the browser.
Any idea how to to standardize this without having to turn to multiple style sheets?
Here is what I am working with:
.combo
{
padding: 2px;
width: 200px;
}
.text
{
padding: 2px;
width: 200px;
}
This is my document type for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Try setting font-size on the selects as well, that can affect how they are rendered. Also consider the min-width and max-width properties.
Form controls will always be less obedient to styling attempts,in particular selects and file inputs, so the only way to reliably style them cross-browser and with future-proofing in mind, is to replace them with JavaScript or Flash and mimic their functionality
input[type=text],
select {
border: solid 1px #c2c1c1;
width: 150px;
padding: 2px;
}
// then
select {
width: 156px; //needs to be input[type=text] width + (border and padding)
}
/*
The input[type=text] width = width + padding + border
The select width just equals width. The padding and border get rendered inside that width constraint. That's just the way SELECT rolls...
*/
Make sure you remove all default margins and padding, and define them explicitly. Make sure you're using a proper DOCTYPE and therefore rendering IE in Standards Mode.
You may use faked dropdown widget and replace the SELECT.
Browsers tend to limit the amount you can style form controls with CSS, because form controls have a lot of complicated styling that varies between operating systems. CSS can’t describe that fully, so browsers put some of it off limits.
Eric Meyer wrote a good article on the subject:
http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
The best you can do is accept you don’t have complete control over the look of form fields, and experiment with whatever styling is really important.
Try using Firebug or Chrome's "Inspect Element" feature (right click on the select control, click "inspect element") to see exactly what style properties are being inherited/rendered for that specific object. That should lead you in the right direction.
I've tried all these suggestions ... and I finally have it so it looks good in IE and Firefox. Looks like there is something wrong with the padding on the SELECT control. If I increase the width of the SELECT by 2 pixels the now size correctly.
.combo
{
padding: 2px;
width: 206px;
}
.text
{
padding: 2px;
width: 200px;
}
However, Chrome still does not show them the same size.
Martinator is correct.
Sounds like you're trying to control the width of various types of inputs or menus across bowsers. You can directly select the object and specify the width. For example:
select {
width:350px;
}
Or you can do this with text area:
select {
width:350px;
}
Other types of inputs require the syntax Martinator mentions. So, for a text, input, or even file type input, you'd do this for each one:
input[type=text] {
width:350px;
}
input[type=input] {
width:350px;
}
input[type=file] {
width:350px;
}