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.
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/
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.
I know this question has been asked before, but I'm having some difficulty getting it to work in IE9. I have an html page with 3 forms in it (since each form contains a request to a different resource on a website). The html looks like this:
<form action="/SomeController1/Action" method="get"><button name="action" value="someValue">Request the first thing</button></form>
<form action="/SomeController2/Action" method="get"><button name="action" value="someValue">Request the second thing</button></form>
<form action="/SomeController3/Action" method="get"><button name="action" value="someValue">Request the third thing</button></form>
I'm trying to disable the blue glow that is showing up on all three buttons when the page loads. I think it looks really confusing...
The solution that I'm trying to implement, which doesn't seem to be working, is:
button
{
outline-width: 0px;
outline: none;
}
At any rate, the glow doesn't appear in Firefox or Chrome, it just seems to be appearing in IE. I suppose I could just use one form and put 3 buttons in it, but this seems a bit more like a workaround rather than a solution. Is there any way to do this using CSS or javascript? Any help will be appreciated!
Thanks!
Edit - Here's an image of the problem:
I was just hoping to get rid of the blue color.
You can't just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.
You can only remove the blue inner glow if you're willing to style a decent looking button yourself, starting with setting a border/background (which disables using the native style).
with 'glow' you mean a border? in that case, just do;
button { border: 0; }
I don't have IE 9 to test---but generically in CSS, you should try
button:focus {
outline:none;
box-shadow:none;
}
Adapted from "Removing the blue glow from an HTML text input when selected".
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
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"?