I have an asp.net, mvc 3 app which shows a page with the following in it:
<input type="file" id="binary" name="binary"/>
On IE the "Browse..." text is getting highlighted, making the button look like rubbish:
When you don't highlight it, it looks like this
This only happens after a load or refresh of the page, and only if the Browse button is the first button I move the mouse over. I expanded the size of the button, and you can see the white highlight of the button.
This is very odd and only happens on ie. Any ideas?
From the screen shots I found that there might be background:white css you have applied.
If it is please remove it by,
input[type="file"]{
background: none;
}
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
See http://www.tuxx.nl/internationaal/vliegafstanden/internationaal/. Now scroll down and you see a button bar and one button with Doorsturen on it. Now, it works fine in Chrome, Firefox, but in Internet Explorer 8 you can see an e-mail icon. I looked where it came from and I saw that Sharethis automatically puts an image inside the button. I tried to get rid of that, but that didn't work. How can I remove this image/icon?
Use firebug to see if it has classes and use css to hide it with display:none;
If it does not have any class/id you could try to catch it with css selector img[src="/*YOUR IMAGE SRC*/"
To better help you I need to see some code ;)
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"?