CSS padding on input element breaks ie6 ie7 - css

After a bunch of googling and searching, I can't seem to find any info on this.
The problem:
In ie6 and ie7, the text entered into a styled input is displayed "cut in half", with some of the text clipped off in the middle and the remainder hidden underneath the bottom of the input.
Picture the word FOOBAR inside the input. You would only be able to see the top-half of the word, with the bottom-half hidden by the bottom-part of the input.
The input element:
<input name="email" size="40" type="text" id="email" class="input" />
The styling:
input, select, textarea {
font: 13px Verdana, Geneva, sans-serif;
}
input.input, textarea.textarea {
padding: 10px;
}
When I adjust the padding between 0-2px, everything is fine. Increasing the padding pushes the text further south.
All other mainstream browsers work fine, just ie6 and ie7 are giving me headaches.
There are no other styles in play.

This only happens in Quirks mode, so fix your doctype.
It looks like IE isn't able to change the height of an input in quirks mode, causing the padding to just move the text out of view due to the top padding.

Related

Font overflows out of text input on Chrome

I am having an issue with the font causing a "text overflow" on input elements in Chrome. Here is a JSFiddle I have created:
http://jsfiddle.net/13e5q8Lf/2/
I have tried using overflow-x properties and whatnot but it doesn't seem to affect it. Is there a way I can stop those extra tails from appearing, or is this just a Chrome bug that has yet to be fixed?
Try removing the margin from the input and give overflow:hidden to the enclosing div http://jsfiddle.net/dvjkh7xs/
<div style="overflow:hidden">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</div>
This is not a perfect solution. It will need you to surround the input with a div. You might as well surround it with a span with display:inline-block.
<span style="overflow:hidden; display:inline-block">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</span>
It looks like a chrome bug. As of version 37 they have changed the text rendering engine so this could be a bug. In the mean time add padding to the input
I'd venture to guess that it is related to the font too. Try entering "Lj" uppercase L lowercase j into the box. The left curl of the 'j' also goes underneath the 'L'.
I would just add:
text-indent: .2em;
to the input box. It would make non-'j' characters indented slightly from the left, but I doubt a user would stop using your site just because there is some left whitespace in the input box :)

Force an input to display inline with automatic width

I have a readonly HTML <input> that I'd like to display just like a <span>.
However, applying the following CSS causes it to stay as inline-block in Chrome v34 on Windows.
input[readonly] {
background:none; color:inherit; /* normal colors */
border:0; margin:0; padding:0; /* no special sizing */
width:auto; display:inline; /* try to make it inline and auto-size */
}
Demo: http://jsfiddle.net/52vL3/
How can I make the input stop requiring an explicit size, using CSS?
There are a bunch of things happening here, but inline-block is not your problem. This can be shown by adding
-webkit-appearance: none
You'll now have an inline input that's still not resizing itself. The problem is that inputs don't automatically size themselves to their value, even when inline.
If it were a type="text" input, you could set size="2" (default is 20) on the input and it would resize it accordingly (albeit with a bit of extra space).
Unfortunately, type="number" ignores the size attribute.
So, you could try using a pattern instead of type="number"
<input value="64" type="text" pattern="\d*" size="2" readonly>
You may want to increase the size when you make it editable though, because the input won't automatically expand to fit wider values.
See this question for an approach to auto-sizing an input as you type.
Or, depending on how you're using it, you might like to consider <span contenteditable="true">

Alignment of <input type="submit"> in Chrome changes if value=""

I have a simple HTML form with only two elements -- a text box and a submit button -- that need to be horizontally aligned.
The button has a background image, and I would like to set its value="".
In Safari and Firefox, the alignment is maintained if I set the line-height on the elements.
In Chrome, however, this is not enough. I have to set the value=" " (note the space), or give it another text value. Otherwise, the elements shift.
This is the HTML and css
<form>
<input type="text" id="email" class="textBox" />
<input type="submit" id="submitSubscribe" class="submitButton" value="" />
</form>
.submitButton{
width:30px;
line-height:30px;
background:url('');
}
.textBox{
line-height:30px;
}
#email{
width:146px;
}
Here is my jsfiddle:
http://jsfiddle.net/EmCQJ/5/
Does anybody know why Chrome calculates the alignment differently with the text in the value attribute than when the value is blank? Leaving that space in the value feels like a hack solution to me, but I've tried all the obvious css fixes and still can't get it working. Any input is greatly appreciated. Thanks!
This should do it: http://jsfiddle.net/EmCQJ/38/
The key here was
vertical-align: text-top;
It seems the input-text and input-image elements have different baselines (the default setting for vertical-align) but the same text-top line.
You should manually set the margin, padding, and border of the input-text element because different browsers have different defaults. When doing this, remember height is the size of the element less the margin, padding, and border so if you want a total height of 30px make sure to subtract 1px from the top and 1px from the bottom giving you a CSS height of 28px.

Inconsistent CSS behavior: 'display' and 'float' -- need advice

I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/

how to make firefox cursor be based on line-height, rather than height of textbox

As shown in the picture above, if you have a textbox with padding, the initial cursor size at least on my Mac is the full specified height with padding. Of course, when you start typing, it goes back to normal text sizes (see that 'Password' watermark).
Is there a way to make the initial cursor the right size, aside from simply resizing the actual textbox? (It works on Webkit browsers fine.)
Example:
<input type="textbox" style="height: 40px" />
sudo work's fix didn't work for me. But here's how mozilla does it on their website (not a fix) : http://support.mozilla.com/en-US/home They just wrap it in a span and add padding.
<span class="wrap">
<input type="text" required="required" placeholder="Search Firefox Help" name="q" class="text">
</span>
After some experimentation (in Firefox), I found that the only way is to manually set the padding. If it's set to auto or left undefined, then it will create an over-sized cursor. As you stated, this behavior is not present in webkit-based browsers. This is most likely a Firefox bug.
Unideal fix:
<input type="textbox" style="height: 40px; padding: 10px 0;" />

Resources