I set height:40px and line-height:40px to a input field. It working in all browsers except chrome.
IE7 and IE8 not working properly with out line-height property. So I set this property.
Refer below image.
HTML:
Login :
<input type="text" class="inputtxt" />
CSS:
.inputtxt {
height:40px;
width:200px;
line-height:40px;
}
in Fiddle : http://jsfiddle.net/8DF7G/2/
I would suggest use padding instead of line-height.
input {
width:200px;
height:20px;
padding:10px 5px;
}
Related
How do I change the size of this box? As you can see it is way too big for the given table.
I've tried with padding, borders, width ... etc. Nothing seems to work :/
This is the box
<input type='color'>
Combining border, background, and padding properties will get rid of the 'added space'.
The main one that gets rid of the colour is background.
input {
border:0;
background:none;
padding:0;
}
<input type='color'>
Updated:
I have found -webkit-color-swatch-wrapper and -webkit-color-swatch
input{
margin:0;
padding:0;
border:0;
}
input::-webkit-color-swatch-wrapper {
padding: 0;
margin:0;
background:none;
}
input::-webkit-color-swatch {
border: none;
}
<input type='color'>
You could give your input an ID, and change width and height with css like this.
<input type='color' id="myColor">
and the css like this,
#myColor {
width: 100px;
height: 20px; }
I have a search box on-top of the page I am making, I have been trying to make the page cross-browser friendly as well as have a flexible page resolution.
I have come across this problem
http://imgur.com/gS3q02W
The button and the input box don't line up horizontally. No matter what I change it to one is always different than the other on the other browser.
Does anyone know of a cross-browser friendly solution?
html
<div id='search'>
<form>
<input class='search' type="text" placeholder="what would you like to find?" required>
<input class='button' type="button" value="search">
</form>
</div>
css
#search {
padding-left:200px;
margin-right:5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.search {
margin-top:5px;
padding:4px 15px;
width:250px;
background:#FFF;
border:none;
color:#232d38;
}
.button {
position:relative;
padding:4px 15px;
left:-4px;
border:none;
background-color:#FFF;
color:#232d38;
}
.button:hover {
border:none;
background-color:#FFF;
color:#000;
}
I have found the solution.
The problem is down to the browser’s default styles. Mozilla, in their infinite wisdom, have chosen to put this line in their CSS:
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
In Firefox, buttons get an extra 2px padding. In all other browsers they don't. So it is impossible to make them match using just padding.
You have to set top and bottom padding to 0px, and use height: 25px; vertical-align: middle; to make up for the loss of padding.
I was having this same issue, and used John's answer above to come up with a solution without having to use the height and vertical-align properties.
In my reset styling I basically made it so that all inputs had normal line height so that Chrome would render the same as Firefox and IE. The important addition between this and John's code above as targeting the general input selector:
button, input[type="reset"], input[type="button"], input[type="submit"], input
{
line-height:normal !important;
}
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I came across a problem and I tried searching on google and here too, however, could not get the right solution. Let me be brief...
I have a div name #email_input_box which contains <input type="text" class="email_box" border="0" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
The issue is in padding the text, it works fine in other browsers, however, it does not work in IE7.
Here's my .email_box class styling
.email_box{
width:160px;
height:26px;
background:url(images/inputbox_email.png) no-repeat;
line-height:26px;
color:#969595;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:normal;
}
and here's my div #email_input_box styling
#email_input_box{
width:180px;
height:26px;
float:left;
position:absolute;
top:60px;
}
I need help with the padding-right issue in IE7. Thanks!
input doesn't have a border attribute, remove it.
<input type="text" class="email_box" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
this may solve the problem. however even if it doesn't, it should be removed.
Also the div containing the input have a less width than the input.
I have this code :
<input type="text" class="contactInput" value="my string">
.contactInput
{
border:0;
margin:0;
padding:0;
background-color:#000000;
color:#ffffff;
height:22px;
width:290px;
padding-left:5px;
}
and I'd like to vertical-align it. Firefox and Chrome do it automatically (as IE9). With IE8 or 7 is in the top.
How can I do it with CSS?
Assuming you mean vertically align in the centre, you can use the line-height CSS property to do this. Simply set it to be the same as the height of the element.
There is a problem with line-height in Chrome. When inline-height == height then chrome on picking edit box displays large cursor. When you start typing cursor decreases. Possible solution is to use paddings (top & bottom). In your case:
height: 18px;
padding-top: 4px;
For webkit, its better to use paddings to avoid giant cursor, like that.
line-height: 14px/*to enclose 13px font, override this if needed*/;
height: 14px/*to enclose 13px font, override this if needed*/;
/*Padding is needed to avoid giant cursor in webkit, which we get if
height = line-height = 22px.*/
padding: 6px 8px;