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;
Related
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.
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/
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.
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.