I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
Related
I've tried this in my project, on jsfiddle etc.
why am I getting a weird grey outline here:
all I have applied is:
.myInput{
font-size: 15px;
text-align: center;
border-radius: 20px;
}
<input class="myInput" />
I obviously just want it to be like this without the dary grey outline...
You can fix it with "border:none" or something similar. Take a look at the border property for more info.
I've used "1px solid black" in the example below.
.myInput{
font-size: 15px;
text-align: center;
border-radius: 20px;
border: 1px solid black;
}
<input class="myInput" />
Extra notes
The reason you're seeing this behaviour is because the browser will apply a default style to your elements. By not overwriting them with CSS your elements will adhere to said style. You don't really notice this when you don't add a border-radius because Chrome (I tested on Chrome) outlines input fields with a teeny tiny grey border. Once you add the border-radius however things become more noticeable.
The answer, therefore, is to take a look at the available border properties to style the input how you'd like, rather than relying on the default styling of the browser.
I came across a little browser compatibility issue.
i have a search input field <input type="search">
and while in Chrome the height is exactly as i want it to be (30px),
the height in IE is always 2px more (32px)
heres the css code:
.search_field{
width: 80%;
height: 30px;
border: solid;
border-width: 1px;
border-color: #eeeeee;
margin: 5px 0 5px 0;
padding: 0px;
}
.search_field:focus{
outline-width: 1px;
outline-style: solid;
outline-color: #919191;
}
html:
<li>
<b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
<input type="search" class="search_field">
<input type="submit" value="Search" class="search_input">
</li>
Are there any other IE defaults besides those i already tried to change?
Thanks!
I think, it's because of border you are adding with it. So, 1px from top and 1px from bottom, this way it's taking 2px more than it. Try fixing this once.
if not even this works, then you can add some css hacks like:
_height : 28px; /* IE 6 */
*height: 28px; /* IE 7 */
Note: Keep this in mind that these are not valid css. I mean when you will validate it, it won't. Take reference: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Are there any other IE defaults besides those i already tried to
change?
You can easily inspect your element style attributes using The IE Developer tool.
Just hit the F12 key and inspect your input search field.
Click the arrow button inside of the Developer Toolbar window at the bottom of the screen and select which Element needs to be inspected by placing the cursor over the Element and then click on that Element
Add the following CSS code, as suggested by #Passerby in a comment:
.search_field { box-sizing: border-box; }
The reason is that otherwise the height property specifies the content width, excluding padding and border, and the 1px borders above and below thus make the total height 30 + 1 + 1 pixels. The box-sizing property can be used to override this.
Arguably, IE (and Firefox) is doing the right thing here, since the HTML5 CR says, in the section about form field rendering, that in “standards mode”, an input element with type=search has normal CSS sizing, whereas in Chrome, it has box-sizing: border-box in the browser style sheet.
Those super IE troubleshooters out there. Here is the bug. At the bottom of this form: http://xquives.kiaistudio.com/new-form/index.php there are two buttons. They appear perfect in IE10 FF etc., but not in IE 9-8-7. How do I fix this?
buttonbox css:
#buttonbox {
display : block;
margin-top:20px;
margin-bottom : 20px;
overflow:auto;
float:right;
}
button class css:
.button {
background:#5f6156;
background:rgba(0, 0, 0, 0.6);
color:#FFF;
padding: 5px;
float: left;
width: 100px;
border: 1px solid #000;
font-size: 12px;
font-weight: bold;
margin:10px;
display:block;
height:30px;
}
.button:hover {
color:#D3411F;
}
button div html:
<div id="buttonbox">
<input name="SOUMETTRE" type="submit" class="button"/>
<input name="REINITIALISER" type="reset" class="button" />
</div>
--
more info, the button in IE 7-8-9 that are useless are black with no text (or black text) so we dont see the writing... but trigger the post from OK .... just cannot see the text that IS there in FF or IE10
--
Here is a multiple screen capture to SUM it up !
The input tag needs to have a value attribute to tell the browser what text to display – Cody Guldner Mar 22 at 20:34
Although I can't see all of the code because the link is broken, I would assume that you have inserted the text into the input by some sort of pseudo-class, such as :before or :after. I know this, because
You don't have a value attribute on your input
You must be using something that isn't supported in lower browsers
So it probably isn't jQuery, because that has good browser support
So to solve this, all you need to do is add a value to the input. This will assure that the text is always displayed, because it is hard-coded into the HTML.
The buttons will still have their functionality. Its just that nobody will know what they do/
Ive removed the background and border from a submit button so its styled as normal text. FF is fine but IE is indenting the text and I can't figure out how to remove this text indent.
Thanks
Update - Ive set the padding, margin and text-indent to 0 but no luck. Ill upload the site so I can post a link soon.
Update 2 - Ah, I just needed to add text-align:left;
have you tried text-indent: 0; padding: 0; in your CSS?
posting some code may help, too.
There's padding on the button in IE. Try setting the padding to 0.
.text-button
{
padding: 0; /* remove padding */
border: none;
background: transparent;
text-decoration: underline;
}
// The button
<input type="submit" value="Submit" class="text-button" />
I just needed to add text-align:left;
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.