This issue has been driving me crazy all morning. I've been trying to get my input field with a custom background to align correctly in IE. I read other questions that said line-height will fix it, but that hasn't been working.
It looks fine in chorme/safari/etc but in IE8 the text is stuck to the top of the input area. (Stack won't let me post images yet). My CSS is:
#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
line-height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
}
and the HTML:
<input id="email" type="text" name="email" size="14" value="your email address" onfocus="if(this.value=='your email address') {this.style.color='#333'; this.value='';}" onblur="if(this.value== '') {this.style.color='#808080'; this.value='your email address';}" />
Any ideas on how to get my input text to vertically center in IE 8 and lower?
This should be easy to fix. The line-height property is important, but it seems to get lost in IE8 when you're using the shorthand font property. Try adding in the line-height to the shorthand font property, and removing the line-height that you have declared separately.
#email {
background: url('BACKGROUND IMAGE') left top no-repeat;
background-size: 273px 38px;
width: 273px;
height: 38px;
border: 0;
margin: 0 0 5px;
font: bold 12px/38px arial, helvetica, sans-serif;
color: #777;
padding:0 8px;
outline: none;
float:left;
border:1px solid #999;
}
Here's a jsFiddle example for you (border added just to show how it's aligning).
Related
input[type="number"] field does not showing the placeholder text in latest firefox for certain font family like font-family: 'Open Sans';. The current version is Firefox Quantum 57.0.2 (64-bit)
Still don't know some font family have no such issue
Please check on the demo link https://codepen.io/anon/pen/zpqzEB
body {
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip: content-box;
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
It's your border-box property.
I'm not sure why it's happening on CodePen because it looks fine on JSBin and here on StackOverflow in the snippet you posted. Maybe it's CodePen not working great with Quantum.
Anyway, here's what's happening:
The border-box property will make it so the padding and border are included in total width and height of the element (w3schools.com).
Your input height is set to 40px. That 40px has to include the border, padding-top, padding-bottom, and the height of the element itself. Your line-height is also set to 40px. Your padding styles (you have two rules set, so it picks up the second one) is padding: .5rem 1rem;.
There isn't enough room for the input text in these 40 allocated pixels with.
Issue: 40px line height + top padding + bottom padding > 40px
As for a fix, I'm assuming you want to keep your padding and have your inputs the same size. You may need to make your font size smaller or make your inputs larger. 40px isn't enough for the padding and a 40px line height. Or you can remove that border-box property.
It kinda looks to me that the difference between this property on Chrome and on Firefox is that Chrome is ignoring the line-height. In this screenshot on Chrome, the height of the input is 22px, even though your line-height is 22px.
The root cause of the issue is that font-size is in excess of the number input controls.
Your example can be fixed preciesely by using:
padding: 0.46rem 1rem;
EXPLAINED
When padding is applied to a number type input the padding is applied to the boundaries of the box in the normal way however in some browsers cropping occurs relative to the amount of padding applied.
The cropping effect is calculated from the inside boundaries of the input arrow controls.
The cropping only affects placeholders because they are behind the input layer and become hidden when the interior boundaries of the input field are moved to cover it.
https://codepen.io/anon/pen/qpZPKd
There are various ways to avoid this however my recommendation is to avoid padding on input elements and to use alternate methods to create the desired effect.
Be an illusionist
Personally I don't see any reason to use vertical padding inside input fields. Line-height does a better job.
If you can't make the browsers do what you want make the user think the browser is doing what you want!
body {
padding: 2rem;
}
.Wrap{
box-sizing: border-box;
height: 40px;
border: 1px solid tomato;
padding: .5rem 1rem;
}
.Wrap input {
width: 100%;
height: 100%;
line-height: 40px;
border: none;
font-family: 'Open Sans';
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="Wrap"><input type="text" placeholder="Text field" /></div>
<hr>
<div class="Wrap"><input type="number" placeholder="Number field" /></div>
Codepen example
https://codepen.io/anon/pen/QaNOdo
For some reason, when I change to height of your input field to anything above 40px it seems to work. Try this:
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 41px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
I can't see why this fixes it though.
EDIT
You use two times PADDING in your css input declaration...
Just remove the first one : padding: 0 10px;
And keep : padding: .5rem 1rem;
body{
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
input[type="number"] {
// line-height: 1.5;
}
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I am running a site inside of an application viewer. This viewer will render the website in IE8 compatibility mode which I have no control over and can't change.
I have an input with top/bottom padding of 6px and left/right padding of 12px, but for some weird reason the bottom padding is ignored and the padding is incorrect.
Here is a screenshot of what I'm seeing:
Here is the CSS I'm using to style the input field:
input[type="text"] {
line-height: 1.42857143;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
padding: 6px 12px 6px 12px;
*padding: 6px 12px 6px 12px;
}
I have Googled around for a while now and can't seem to be able to find a solution to my problem. Many tips I found suggest to use various line-height adjustments, while some suggest to use *padding: 6px 12px 6px 12px;. None of these tips work and the issue still exists.
How can I force the input to have equal top and bottom padding in IE8?
Note: I CANNOT use the http-equiv meta tag as it will cause other problems with the viewer.
You cannot :(
you may style a regular tag instead :
span {
float: left;
border: inset gray 2px;
background: white;
line-height: 2em;
height: 2em;
}
span input {
border: none;
}
.submit,
.submit input {
background-color: #337AB7;
border: solid #337AB7 2px;
width: 3em;
color: white;
text-align: center;
}
p {
display: inline-block;
box-shadow: 0 0 3px white;
}
body {
background: tomato;
}
<p>
<span>
<input type="text" value="(800) 123-456789" />
</span>
<span class="submit">
<input type="submit" value="Dial"/><!-- unless this a link , styles to be applied here & span can be skipped -->
</span>
</p>
This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs
I am having trouble getting my submit button to display in line with my inputs in internet explorer. The alignment is fine in safari and firefox but IE is dropping the button down about 5px. Any ideas why this is happening or how i can fix it?
The url is http://www.menslifestyles.com
click subscribe at the top of the page the form will pop in.
The two inputs line up straight but in ie the submit button doesn't align!
-------html-------
<div id="subscribe">
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail">
<input type="submit" value="Submit">X
</form></div>
-----css-------
#subscribe{
width:620px;
position:absolute;
top:25px;
left:50%;
margin-left:-120px;
overflow: auto;
z-index: 1000;
background: #ffffff;
color:#6e6e6e;
font-size: 10px;
text-transform: uppercase;
font-family: Helvetica, Verdana;
}
#subscribe input{
border: 1px solid #e5e5e5;
display: inline;
height: 12px;
color:#cccccc;
width: 215px;
}
#subscribe input[type="button"], #subscribe input[type="submit"]{
clear:both;
padding:3px, 0px;
-webkit-appearance: none;
font-family: Helvetica, Verdana;
background-color:#cccccc;
text-align:center;
color: #3c3c3c;
font-size:10px;
text-transform: uppercase;
border: none;
cursor: pointer;
display: inline;
height:15px;
width:60px;
position:relative;
margin-left:5px;
}
#subscribe form{
margin:0px;
padding:0px;
}
#subscribe label{
display: inline;
font-size: 10px;
}
#subscribe a{
text-decoration: none;
color: #cccccc;
}
#subscribe #closelink{
padding:0 5px;
}
In your css for #subscribe input[type="button"], #subscribe input[type="submit"] try to add vertical-align: top;
You should set padding and margin explicitly, some browsers have different defaults which will mess things up. So margin-left:5px; becomes margin: 0 0 0 3px;
Forms are also just inconsistent generally, you may want to try and absolutely positioning the submit button, in which case give #subscribe position:relative, and the submit button position:absolute; right:0px; top:0px;
In the future you can get around default browser values, and get a more consistent look by setting default values in your stylesheet , see here for a reset stylesheet that you can include. (If you include this now it might throw a few things out)
In this css rule
#subscribe input[type="button"], #subscribe input[type="submit"]
Change
position:relative
to
position:absolute
Should do the trick. Tested in IE 8 and works.
Submit button seem to have different default margin and padding values in different browsers.
I assume this must be in some reset Stylesheet as this is not the only annoying cross browser "default" values discrepancy. When is the web going to standardize this is another subject.
This is how we do it:
#searchForm {
position: relative; // you must keep this
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 30px;
}
input#searchBtn{
padding: 0; // you must keep this
margin: 0; // you must keep this
position: absolute; // you must keep this
left: 203px; // you can change this
top: 2px;
height: 24px;
width: 42px; // you can change this
font-size: 14px;
background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
}
<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
<input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>
I noticed very small discrepancies between IE8, Firefox and GChrome but there may be in other browsers.
The form here has its position set to "relative" so that when I set the button's position to absolute, the button position itself relatively to the searchForm.