I have the following padding: padding:12px 24px; for input button and label for checkbox.
Font is set in body 16px Arial, all other font sizes inherited. border:0; for all elements. Why do browsers add 1px to button's height? So if label's height is 42px - button's height is 43px. This happens in Chrome and Firefox.
How to make the same height for buttons and labels?
Part of code
<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label>
<input type='submit' value='Sign in' id='signin-button' /> (in the HTML form)
Try adding line-height: 17px; , sorry if you have already tried line height.
Not sure, but it probably comes down to line-heights of the fonts and how they're handled in different elements in HTML.
Try forcing a height with CSS like so:
#signin-button { height: 42px!important; border: none!important; overflow: hidden; }
I'm usually against setting exact heights for elements as a general rule, but for this case, it might just do the job and be appropriate.
Good luck.
Related
I have the following two form fields. They have the same width so they should be displayed aligned and they do so except for Google Chrome. In Google Chrome, the textarea has a little more width. Please help me out in fixing it. Thanks
<input name="phone" type="text" id="phone" style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px; margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<textarea
name="message"
cols="38"
rows="12"
id="message"
style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
onFocus="if(this.value==this.defaultValue)this.value='';"
onBlur="if(this.value=='')this.value=this.defaultValue;">
Message
in the code you posted your text area has a width:38px; did you mean to have width:385px; to match the width of the input field? you may also want to include a reset.css
I suspect that 38px in the style for the textarea element is a typo and should be 385px, otherwise you would the area as narrow on all CSS-enabled browsers. And I suspect that in the real code, there is something that causes a line break between the input and textarea elements; otherwise it is difficult to compare their widths.
The reason why the textarea is slightly wider on Chrome is that by the browser stylesheet for WebKit-based browsers, textarea elements have 2px padding. You can see this if you use the Inspect element tool of Chrome (via right-clicking) and view “Metrics” there.
The apparent solution is then textarea { padding: 0; }. But since the padding is actually useful, it might be better to set
textarea, input { padding: 2px; }
You seem to be sizing the input element using the size attribute and using cols in your textarea.
You also are defining two styles: width:385px and width:38px (the inequality is probably your problem). I'm not sure which takes precidence (size or cols), but why not avoid confusion and just set equal an width for both elements and just remove the size and row/col definitions?
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;
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.
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
I have a website design that includes text input fields that look like this:
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
Is this best or is there another way?
--
Trial:
I tried the following:
<style type="text/css">
input.custom {
background-color: #fff;
background:url(/images/input-bkg-w173.gif) no-repeat;
width:173px;
height:28px;
padding:8px 5px 4px 5px;
border:none;
font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />
but in IE (6 & 7) it does the following when you type more than the width:
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
I'd do it this way:
<style type="text/css">
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
div.custom input {
background-color: #fff;
border:none;
font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>
You just have to adjust the padding values so everything fits correctly.
It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
Edit:
With jQuery you could do it this way:
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
input.custom {
background-color: #fff;
border:none;
font-size:10px;
}
And your HTML:
<input class="custom" ... />
You don't need the div element, you can assign a background to the input directly.
Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
Have you evaluated using background image like this:
<style type="text/css">
input{
background-color: #AAAAAA;
background-image: url('http://mysite.com/input.gif');
border: 0px;
font-family: verdana;
font-size: 10px;
color: #0000FF;
}
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/ (Right hand side Newsletter)
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
okoman has gotten the CSS aspect correct. May I suggest using a <label> to improve the semantic structure of the markup?
<label id="for-field-name" for="field-name">
<span class="label-title">Field Name <em class="required">*</em></span>
<input id="field-name" name="field-name" type="text" class="text-input" />
</label>
<style type="text/css">
label, span.label-title { display: block; }
</style>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
Edit: If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none; in the CSS. This will allow screen readers to understand the input but hide it from regular users.
The easiest way to get rid of the overflow without JavaScript is simple:
Create a 3 spans, and set their heights to the height of the
image.
Cut the image into 3 parts, ensuring you cut the image such that
the left and right round parts will be on the 1st and 3rd images
respectively.
Set the background of the 1st span to the image
with the left border, and set it to no-repeat.
Set the background
of the third span to the image with the right border and set it to
no-repeat.
Put the input inside the middle span, remembering to
set its height to the height of the spans, and its background to the
2nd image, and repeat-x only.
That will ensure that the input
will seem to expand horizontally once the input is being filled. No
overlapping, and no JS needed.
HTML
Assuming the image height is 60px, the width of the first and third span is 30px,
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}
That should resolve your issue.