I have come across a weird kind of inconsistence in rendering in Chrome.
A simplified example of the issue can be replicated by using the following code:
<html>
<head>
<style>
input, span {
border: 1px solid #CCC;
padding: 3px 4px;
height: 23px;
width: 120px;
display: block;
font-size: 13px;
}
</style>
</head>
<body>
<div><span>123</span></div>
<div><input type='text'/></div>
</body>
</html>
So, in a few words, the span and input should have the same size, but it turns out, that Chrome renders the elements differently:
Span is rendered so it's actual size is 31px
Input is rendered so it's actual size is 23px
Upon investigation it looks like Chrome renders the span so it's "inner" (without border and padding) size is 20 px, while input is rendered so it's "outer" size is 20px.
In real application the controls are used in a "in-place edit" scenario, so when user clicks the span, the span becomes hidden and input is shown on it's place. As you can see, with such a difference in size, the transition isn't smooth. Wjat's worth is that the controls are placed in a table cell, so the difference in width and height cause the whole table to change layout a bit.
I'm working on a cross-platform application, so it should work in IE9 as well. The problem is that IE renders both input and span of the same size, so the page looks quite different in IE and Chrome. To make the my life harder, those controls are rendered by ASP.NET server controls, and I'm allowed to change css only.
I'm using Chrome 23.0.1271.91 (latest at the moment of posting) on Win7x64.
So, thre are two questions actually:
How do I fix this?
Why it's happening? Am I missing something obvious? Is it an expected behavior?
Chrome sets box-sizing: border-box; by default on input elements and textareas.
Set box-sizing: content-box to make them both behave like the span or both to border-box to make them behave like the input.
A good explanation about the box-sizing methods can be found here: http://www.quirksmode.org/css/box.html
Since Chrome supports box-sizing, try:
<html>
<head>
<style>
input, span {
border: 1px solid #CCC;
padding: 3px 4px;
height: 23px;
width: 120px;
display: block;
box-sizing:border-box;
}
</style>
</head>
<body>
<div><span>123</span></div>
<div><input type='text'/></div>
</body>
</html>
http://jsfiddle.net/9esTQ/
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; }
When measurements are specified in cm or inches for an element, it is printed at exactly that size from Firefox and Internet Explorer. Chrome on the other hand makes the elements bigger.
Is there anyway to make Chrome print things at exactly the specified size, or is it something I'll just have to live with?
E.g.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
The above code prints an exact 5cm (on my printer) in both Firefox and IE, but prints at about 5.5cm from Chrome.
I have found this issue too.
After playing with MANY wasted sheets of paper, I've found that Chrome tries to scale the HTML.
For example, add a full width div to your sample below and it'll resize the box correctly, because you're asking Chrome to make the box 100% of the page and thus forcing a 1:1 scale of the page.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 100%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
Unfortunately, when I tried this, it didn't fix the height issue, but also I couldn't make the box 0px without it losing correct scaling.
Incidentally, take a look at the following to show how it affects the sizes when printed.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 200%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
In a nutshell: Chrome's printing capabilities are shocking!
Firefox works far better for printing, but runs much slower.
The solution with a 100% wide div doesn't work for me on the current Chrome version, but this works, for an A4 paper:
html, body {
width: 210mm;
}
For Chrome, just set the print margins to something, and set the body to the width of the paper, minus the margins.
E.g. For an A4 page, the width is 210mm
So for 1 inch margins (roughly 2.5cm) you can do the following
#media print
{
#page
{
margin-left: 25mm;
margin-right: 25mm;
}
body
{
width: 160mm;
}
}
The left, right, and width of the body should add up to 210mm.
For letter you'd use 1 inch margins, and a 6.5 inch width on the body.
I confirmed that I had the same issue when using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects like padding and margins. From the research I've done, it looks like you're simply dealing with inconsistent browser standards when rendering media queries. If possible, I would recommend conditionally styling the box based on browser.
One other aspect seems to be that not specifying a Doctype (which is a bit of a no-no in development anyway) can lead to inconsistencies.
You can go ahead and see this topic for some more reading about the issue:
Firefox versus webkit measurements for media queries based on width
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix 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.
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