<input type="button" value="Button" />
IE indents the text down and over by 1px when the button is clicked by default. Is there any way to stop this with just CSS?
I'm also adding my own styles to this button, and everything is great until I click the text in the button... IE seems to ignore the :active state defined in my stylesheet. But if I click the button and not the text, IE performs the :active state. Of course the text moving issue is still present no matter what I do.
Any ideas?
If you use a styled A-tag you get around this whole "pressed" state issue completely. Using display:block and some CSS you can style the A-tag to look exactly like any button.
Okay, so, I had the same problem and I've discovered a solution that works for all browsers.
I had two form buttons that I changed borders, font family and sizes, and padding on. When I would click them in IE they would "jump" because IE is stupid in my opinion. All other browsers seemed to style the buttons correctly and not have a display issue with the buttons moving when the user clicked them..
The solution I found was:
Style the form buttons so that each of them have an equal margin and apply a wrapper division with a position or margin that will offset to your liking.
#myButton {
font-family: Times New Roman;
font-size: 16pt;
border: 2px solid #f7f6f4;
margin: 20px;
padding:15px;
}
<div style="float:right;margin-right:75px;">
<input type="submit" name="myButton" id="myButton" value="Don't Jump!" />
</div>
I don't know which version of IE you are using, but try Button background shift
Also, check out Remove 3D push effect on button, specifically the answer from allicarn, which changes the padding from the element on :active.
Just remember to put the css in IE specific cases, like an IF block.
Related
I would like to add a position effect on :active state on my bootstrap buttons. Unfortunately, the IE does not render the effect properly. Please use this site and compare the effect between Chrome/Firefox and IE 10/11:
http://jsfiddle.net/stebir/f0nw6kp2/2/
If I click on the button, I expect a smooth top transition (which works like a charm in Chrome and Firefox). But IE shifts the label "Button" slightly to right. It's a very subtle effect, but nevertheless it's annoying...
Do you have any idea to prevent this in IE?
Regards, Steven
[1]: http://jsfiddle.net/stebir/f0nw6kp2/2/
This is default functionality in IE... but there are a couple of ways around it.
Use an anchor instead of a button.
<a id="myBtn" class="btn btn-warning">Button</a>
Use a span with posistion: relative to keep the text in place.
<button type="button" id="myBtn" class="btn btn-warning"><span>Submit</span></button>
button > span { position:relative }
http://jsfiddle.net/pv01x0ud/
This is the default color of a submit button, without any particular style. (using chrome)
And this is that button after using this input[type="submit"]{border-radius: 2px;}.
As you see the color of the second one, changed suddenly without any particular reason and also you can see shadow on the right and the bottom sides of the border. (body{direction:rtl;})
What's the reason? I just need the default button with a bit round border(no more). Is there any solution? or I should use an image for this?
JSFiddle here.
The regular, unstyled button is a system UI element (or in Chrome's case, a custom one). Thus, it might not have a CSS equivalent. So when you try to style the button, it reverts back to a plain one that can be styled, but happens to have different colors.
You are going to have to completely take over and specify every part of the button to get a similar look back (and even if you do this, Firefox users, which uses the system default buttons, are going to have a shock). If you liked that look, here's how to replicate it to some degree (Demo):
border: thin solid gray;
border-radius: 2px;
padding: 2px 4px;
background-image: linear-gradient(white, lightgray);
Not to mention :hover and :active state styling. Why not take the opportunity to come up with a nice custom look that fits your page?
If you are attempting to style a form submission button, you are very much so better off using the button element which is fully styleable. The input type=submit element is very hard to style and not consistent across browsers. <button> will let you do anything to it.
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
i am attempting to change an input to look exactly the same as an anchor tag, but for some reason there is a 1/2px gap on the left before text starts. There is also a 1/2px gap on top.
Any idea where these gaps are coming from?
(I have removed padding, margins and borders).
exactly the same problem on safari and firefox.
Here's the best I could come up with on making an <input type="button" /> appear the same as an <a> element
example jsfiddle
Safari, Chrome, and IE all seem to cooperate pretty well with the following:
input[type="button"], a {
margin:0;
padding:0;
border:0;
cursor:pointer;
font:12px/15px Helvetica, Arial, sans-serif;
color:blue;
text-decoration:underline;
}
However Firefox (I'm using 6.0.1) required a bit more finesse:
input[type="button"] {
line-height:15px!important;
}
input[type="button"]::-moz-focus-inner {
border:0;
padding:0;
}
This -moz-focus-inner appears to be the culprit for the extra spacing around the element, both border and padding are set in the internal browser stylesheet (goto resource://gre-resources/forms.css in FF to see the stylesheet)
That said Firefox still produced 1 extra pixel above the text that I couldn't figure out how to remove, though when toggling the button or anchor there was no line-height change meaning the parent div didn't change heights due to this 1px when toggling the elements.
Well, the defaul styles for html elements such as text imputs differ from browser to browser. You must make sure to override ALL of them in your css if you want the thing to look the same on all browsers. For each of the major browsers you have some kind of inspect tool such that when you right click on an element in the page, it offers you the "inspect" option which shows you exactly what css properties the thing has. For chrome and safari this is build it. For firefox install the firebug plugin. For ie8+ install the dev toolbar.
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?