I just noticed this strange rendering of a very simple form.
Here's my markup/CSS: http://jsfiddle.net/a9PLM/
As you can see, text fields and the button share the same styles but their size is quite different.
Why does this happen?
Thanks!
This is because of the box model being used is different for the <input type="submit"> and the <input type="text">/<textarea>. You can make the box models the same by specifying them with CSS:
box-sizing: border-box;
-moz-box-sizing: border-box;
You can read more about box models here: http://www.quirksmode.org/css/box.html
I edited your jsFiddle to show it working: jsFiddle demo
I think this is a browser rendering issue... with buttons being displayed differently than text inputs.
To fix, add this to your css
form input[type="submit"]{
width:273px;
}
Example: http://jsfiddle.net/jasongennaro/a9PLM/1/
Padding on the text fields give it extra space on the sides. Set the padding of inputs and textareas to 0.
The problem is that the form parts are generally not rendered like normal HTML elements, and styling them is always a bit hit-or-miss. I would attempt to avoid a case like this that requires exact sizing, but if you can't, then split the selectors like this:
form textarea, form input[type=text]
{
width:250px;
padding:10px;
}
form input[type=submit] { width: 270px }
Note that I added 20 px (10 x 2) to the width to compensate for padding.
I've used this CSS-only solution which works in IE, FF and Chrome. Basically, the idea is to manually force the height of input elements to values larger than standard boxes. Do this for both text and button:
Set margins and padding to 0.
Set vertical-align to middle.
Use height/width to control text and button dimensions. Text height must be several pixels greater than font height (in order to override standard box dimensions). Height of button must be 2 pixels greater than text.
Example:
input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }
Related
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
input::-ms-clear {
display:none;
}
IE11 input width changes when clicked -
this solution works for clicking the text box
Changing the text in text box changes the width in IE 11
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution
Please change the css
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt
width: 98%; to width:100%
It will work. All the best
It look like it is a bug in IE you can use margin on the child element.
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
So change your percentage based padding to px or em based wil fix the problem.
https://jsfiddle.net/3TwKF/22/
padding: 2px .5em;
I have a page with some clickable <div> elements, and I want to change them to <button>s instead to make it easier to identify them via jQuery. But when I change the <div>s to <button>s, their size changes. (I'm styling them as fixed width and height, but the button renders at a different width and height than the div does.)
Here's a JSFiddle that reproduces the problem: http://jsfiddle.net/AjmGY/
Here's my CSS:
.styled {
border: 4px solid black;
background: blue;
width: 100px;
height: 100px;
}
And my HTML:
<div class="styled"></div>
<button class="styled"></button>
I would expect to see two boxes of identical size, but the bottom box (the <button>) is noticeably smaller. This behavior is consistent across all the browsers I tried it on, both Windows (Chrome, FireFox, IE, Opera) and Android (built-in browser and Dolphin).
I tried adding display: block; to the style, thinking that that might make them both render using the same rules (i.e., make the button render like a div since it's a block element now), but that had no effect -- the button remained smaller.
As I increase the border width, the disparity increases. It looks as though the button's border is inside its width, rather than above and beyond its width as with the <div>. As far as I understand it, this violates the box model, though the W3C does say:
user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.
Is it normal / documented / expected behavior for a button to have its border on the inside of its width and height, rather than outside? Can I rely on this behavior?
(My page uses an HTML5 doctype, if that's relevant.)
Buttons and other input controls are rendered using the border-box model by default; i.e. content, padding and border all add up to the total width that you declare. They also often have some padding added by browsers arbitrarily according to their default stylesheets. As you quote, this is acceptable behavior and not a violation of standards; it's simply to accommodate rendering of OS-level GUI controls.
To get your button to be the same size as your div, size it according to the content-box model (which is "the" original W3C box model) and zero out its padding:
button.styled {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
}
jsFiddle demo
I am stuck on how to make the two text boxes change size when I shrink the page? So when someone drags the page sideways the two boxes also start to go smaller (if that makes sense). Please could you help me?
Here is my code so far: http://jsfiddle.net/xiiJaMiiE/3nQue/
.homeform {
position:relative;
width:20%;
}
Thanks in advance!
You have to select the input elements if you want to adjust its size
.homeform input[type="email"], .homeform input[type="password"] {
position:relative;
width:50%;
}
if you want that the submit button gets resized too, you can simply shorten the above to the next
.homeform input {
position:relative;
width:50%;
}
which will resize all input elements in the elements with class="homeform" attribute.
Although i am not a fan of this implementation. Assume that someone on a mobile is visiting your website, the textbox would be too small. (tip : min-width property or responsive design)
.homeform { width: 100%; }
input[type="text"] { width: 100%; box-sizing:border-box }
should do the trick.
box-sizing switches to a box model in which border and padding are contained in the specified width of the element; otherwise you'll have inputs overflow the container here.
.homeform is the div containing the input tags. You must put the style on the input.
.homeform input{
width: 20%:
}
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.