So I've created a CSS flip animation. My problem is, that it looks totally different in latest browsers of Chrome, FF, and IE. How should I modify the css, to work perfectly in these modern browsers? Thanks!
Here is the working example:
jsfiddle
Related
I am developing the website with React JS and Bootstrap, also it uses pure CSS, and inline Styles.
It works well on Chrome browser, but on the Safari browser, the margin and padding between cards breaks and removed.. 😟
I have learnt there are some solutions like webkit for the styling of various browser (Chrome, Safari, Firefox, etc...).
But I am not sure this will be the right solution for this article.
Is there anything to solve the CSS issue on various browser?
Thank you.
I have a label and want to let it bounce using CSS3 animation. This works in all latest browsers like a charm.
However, once I add a display:inline to the label, the bounce animation effect doesn't work on Chrome browser. It does work for every other browser like IE11, Firefox and Opera, but for some reason it does not work for the latest Chrome browser. Is this a Chrome bug or is there a good explanation for it?
Here is a test case: https://jsfiddle.net/fuex3nz1/1/
CSS transfroms does not works on inline level elements(I mean only display: inline and label is by default inline level). You can use
.label {display:inline-block;}
For more info about CSS transforms property check it
https://drafts.csswg.org/css-transforms/#terminology
And for inline-level elements check this http://htmlhelp.com/reference/html40/inline.html
I'm working on responsive webpage creation and I need to create a piece of CSS that would apply only in Safari(All devices), CSS properties for height working finr in Chrome. I need CSS hack only for safari. Please, could anyone give in some ideas?
Have you considered using java script to detect the browser and based on it applying styles?
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.