Hi am trying to figure out on why in css3 :active or :hover animation dont trigger it works on every other browser. ive wrapped the code into this fiddle
please help me am stuck on this since the past 2 days
in css3 have fix more no of cross browser problem.each browser have a different future.following keywords are using work on all the browser.
Supported by Internet Explorer with the prefix -ms-
Supported by Firefox with the prefix -moz-
Supported by Google Chrome with the prefix -webkit-
Supported by Safari with the prefix -webkit-
Supported by Opera with the prefix -o-
The issue is you are using :active which has an issue in IE (verified in IE 10)
From what I can gather, this is currently not possible as the :active
state of a child is not propagated up to the parent div. Both Internet
Explorer 10 and Opera 11.64 failed to propagate the :active state up
to the parent when testing with div elements.
source: Make a whole div clickable with working :active css rule in IE10
Related
I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.
I'm playing with CSS perspective and I don't get the same result between firefox and chrome/ie.
I want it to work as in chrome/ie (the flipping panel doesn't go over the non flipping cat when it closes).
Here the codepen.io I made for the question :http://codepen.io/mourtazag/pen/cdAuL
Thanks !
you may not be using proper vendor prefix.
-khtml- (Konqueror, really old Safari)
-moz- (Firefox)
-o- (Opera)
-ms- (Internet Explorer)
-webkit- (Safari, Chrome)
and also dont forget to use default code, i.e. code without vendor prefix.
I have created a simple CSS flip animation which works in other major browsers, seems to be not working in IE 9.0 or 1.0 for some reasons.
jsbin handler.
http://jsbin.com/IQUqUBe/1/
Below is the links which i have looked upon.
https://github.com/vinothbabu/3DFlipper
http://davidwalsh.name/demo/css-flip.php
I am not able to figure out where is the issue whether its z-index or any other property which is causing this issue and also can you guys suggest on how to debug CSS code if possible.
When it comes to debuging CSS code you can use developer tools.
For Firefox the best solution would be Firebug
for Chrome, developer tools are built-in. Simply press F12
for IE there is Internet Explorer Developer Toolbar
Its not that it does not work in IE 10. set a doctype at the top: <!DOCTYPE html> This will take IE out of quirks mode. Below is the fiddle for the same.
http://jsbin.com/IQUqUBe/3/edit
This should make the code to work in IE.
I don't know what the problem is specifically, but here is a link saying that transition does not work in IE9: http://caniuse.com/#search=transition
If you go in the "issues" tab, you'll see that it doesn't work on any pseudo-elements beside :before and :after for IE10 (and others).
EDIT: As pointed out in the comments, :hover is a pseudo class, and the link doesn't say that it doesn't work for IE10. I still don't know why it doesn't work.
Have you tried removing the -ms- prefix ? Apparently IE10 supports the transition without prefix.
I am assigned a task and will create a pure css menu that works on all browsers including IE6 and 7. I have to use :hover pseudo class. As these classes are not supported in IE6 still is there are workaround for this using css? If yes please how to do it?
There are a number of tools available on the web for IE6 ~ IE7 pesky fallback.
Check this out:
http://selectivizr.com/
Or if you just want something smaller, look here:
IE6 ~ IE7 great css3 pseudo elements fallback
Good luck,
George!
I am using moz-boder-radius(-webkit-border-top-left-radius) to add rounded divs to my website.
these work fine in Mozilla, chrome and safari but as usual Internet explorer have to have some problem.
Is there any such property to add rounded divs in Internet explorer.
This (jQuery plugin) works cross-browser:
http://jrc.rctonline.nl/
This is a standalone version, also works cross-browser:
http://www.dillerdesign.com/experiment/DD_roundies/
There's no way to get rounded corners with pure CSS in IE.
The -moz and -webkit properties are experimental, and not an official part of the CSS2. They are really meant to work for just Mozilla (Gecko) browsers, and may be phased out of those browsers too after a time.
I used this, it requires no images or javascript,just css:
http://blog.benogle.com/2009/04/29/css-round-corners/
With pure CSS there is no way to do that for IE!
But you can add a conditional comment (<!--[if IE]><![endif]-->) with some extra CSS which apply four rounded corner images to a "top" div and a "bottom" div contained in a main div!
I guess you are trying to use IE version lesser than 9.0.
The border-radius CSS property is supported only from IE 9.0 which brings the nice rounded rectangle.
https://developer.mozilla.org/en/CSS/border-radius
If you need to use rounded rectangle below IE 9.0, you may need to use images to achieve this.