I am working on my new site and I checked it in multiple browsers: ie6+, chrome, safari and firefox.
I noticed that firefox display the top offset of my button in wrong position - like top=-1 and I cant fix it in NORMAL way...
Here's an example
http://jsfiddle.net/7XRZG/
Thank you
button inputs and text inputs seem to have different default vertical align properties in firefox. Try explicitly setting them to the same thing. For instance:
<input type="text" style="height:19px;border:1px solid silver;font-size:10px;vertical-align:text-top;">
<input type="button" value="Search" style="margin-left:5px;background-color:#f5f5f5;color:#707070;border:1px solid #e3e3e3;font-size:9px;padding:0 10px;height:21px;font-weight:700;vertical-align:text-top;">
Related
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
Within the past few months, Google has updated Chrome and I think has broken radio buttons and checkboxes on my website. I'm using version 31.0.1650.63
They work correctly in all other browsers I've tried (FF, Safari, IE9 & IE10). I haven't modified my CSS at all the last few months, so that's why I think it's an issue with Google Chrome.
I've created a simple jsFiddle that shows the behavior I'm talking about (and an external link to my CSS file):
http://jsfiddle.net/v22WB/
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
I've used Chrome's dev tools to disable all styles from the stylesheet but with no luck.
I'm using Twitter Bootstrap 2.0.2, but when I reference that file by itself, the radio buttons and checkboxes are normal. Any ideas?
You've got this line in your stylesheet:
html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}
The -webkit-appearance:none means input elements that have focus (ie a selected radio box or checkbox) aren't being displayed as input elements visually. See this link about customizing input styles. Take that out and your checkboxes should be back to normal.
Please have a look on fiddle
http://jsfiddle.net/URBfj/
i have given padding-left to input tag and now when i am scrolling text in input tag its working fine bt in ie its not working fine.Ie not taking padding.
See workaround on exact same question (though right instead of left side) HTML: IE: Right padding in input text box
You can use css property text-indent for this element:
For example:
<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />
This is my css for a paypal sprite I have made..
Image below shows what we get in Internet Explorer and what we get in Firefox ..
The code to display the sprite is:
.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
.ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}
The code to display the sprite ( html )
<input class="ppsprite" type="image" name="submit" alt="">
The screenpic ( internet explorer and firefox )
The sprite works perfectly in all browsers, but you can see a shitty border in IE and a kind of missing image icon top left.
In chrome and safari, pretty much same ( but shows alt text on top of sprite )
Add a src attribute to your input tag:
<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">
Just create a file called blank.gif
You don't need to do anything with it, just make sure it's in the right directory.
don't use an image-input for your sprite - obviously this should show a broken-link-icon as it must contain an image (set via the src-attrtibute) but you dont set one. maybe you can replace the input with an a (a link) or a button (type="button" or type="submit"). the later should work without changing anything else as a type="submit" would still submit the form, just like type="image" does (and i don't think you'll need to know the klicked x/y-coordinates in this case).
the border simply appears because an input-image has a border by default in some browsers - simply set border:0; for .ppsprite (but, as said, you shouldn't use an input-image at all in this case).
<input type="submit" value="Share" />
In Chrome/Safari:
http://img514.imageshack.us/img514/619/btnwebkit.png
In FF:
http://img220.imageshack.us/img220/347/btnff.png
Can someone please tell me why they don't look the same?
Even, when I set the font-size, font-family, padding and margin, the button in FF will always look bigger than the one in Chrome/Safari.
This is because default styles on HTML elements like input buttons and H1 and UL and LI and so forth are subject to the browser developer's whim. You can minimize the disruption by using a reset stylesheet. That said, you may get better results by using <button type="submit" value="Share">Share</button> instead of an input (with a type of button), and setting the styles on that.