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/
Related
I am using twitter bootstrap in my .aspx page,
the btn-primary show text as blue instead of white.
<asp:LinkButton ID="btnConfirm" runat="server" Text="Confirm"
CausesValidation="true" ValidationGroup="req" CssClass="btn btn-primary"
OnClick="btnConfirm_Click"></asp:LinkButton>
but the btn-default looks as expected.
What is the problem?
any help will be appreciated.
Make sure to use latest version of Twitter Bootstrap.
Try change <asp:LinkButton...> to <asp:Button>, because <asp:LinkButton...> will render your control <a> tag, which 's css is defined by Bootstrap as
a
{
color: #337ab7; /* This is the color of your Confirm button */
...
}
You should try using Google Chrome inspect tool (or something like firebug extention on Firefox) and tracing the CSS rules that gives the text this blue color.
Here's some info on how to use inspect tool
It looks like your CSS is overwriting the text colour value with blue text.
Have a look at the page with the Developer tools and look at the CSS for the element. These things are usually easy to find and fix.
I just am completely clueless here, I've never seen any issue like this before. I have two buttons, one says 'Quote' the other says 'Order'. On chrome these buttons work perfectly and are amazingly responsive when the window is resized the button look does exactly what I want it to, the same goes for firefox, it just works great.
Safari on the other hand is a totally different story, the buttons are there and clickable and fully functional, however they are invisible. I just see nothing...
Here's the HTML code for the buttons:
<a ng-hide="shoppingCartHeader" href="#" ng-click="checkout({{project.id}})" id="btn-complete-btn" class="btn btn-info">Order</a>
<a style="margin-right:20px;" ng-hide="shoppingCartHeader" href="#" ng-click="quoteRequest({{project.id}})" id="btn-quote-btn" class="btn btn-warning">Quote</a>
Here's the CSS code for the buttons:
#btn-complete-btn
{
position:fixed;
right:5px;
bottom:5px;
z-index: 99004;
}
#btn-quote-btn
{
position:fixed;
right:55px;
bottom:5px;
z-index: 99004;
}
You don't see them on Safari but you can still click on them and they work and seem to have the correct sizes... They're just invisible.
The difference between chrome and safari is that the buttons are just invisible on Safari but they can still be clicked on, even if the window is resized....
Is there a work around for this on Safari???
I had the same issue, which led me to this page.
Let me share with you what worked for me.
I created a new class to assign to button tags.
It did no harm in Chrome.
<style>
.safaribtn {background-color:silver;}
</style>
I built a little Chrome extension that has two buttons that change the content of the webpage depending on the button you click. However, Chrome is automatically focusing on the top button, and putting its blue highlighter around it. See the screenshot:
I assume that Chrome has some sort of default that automatically styles it, and it must focus on the top button. Is there anyway to have Chrome avoid highlighting buttons?
There's nothing to my HTML:
<div id="conservative">
<button id="conservatize">Conserve it!</button>
</div>
<div id="liberal">
<button id="liberalize">Liberate it!</button>
</div>
</body>
Try adding the following to your CSS:
*:focus {
outline:none;
}
I found the code in following thread: Chrome default focus outline.
<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.
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"?