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.
Related
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?
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
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
I was working on vertical rhythm of my css framework - it looks perfect in firefox but different in chrome and ie9. Anyone know what the cause?
my framework typography page:
http://kenhty.github.com/Natural/typography.htm
If you are referring to the box-flex grid, then check out the specs of the MDN page on using flexible box. There are a couple issues you're running into...
For one, support is extremely limited. Firefox 18+, Chrome 21+, no support in IE and Safari. As such, you are experiencing issues in Chrome because production Chrome is the only one that actually supports your code, and also you are missing the following styling:
-webkit-flex-direction: column
Yours is defaulting to row, which is causing your issues in Chrome.
More perplexing is that I'm on Firefox 15 and it's displaying your Grid properly... Yet when viewing the computer styles, it doesn't even display your grid styling, as Firefox 15 doesn't yet support it. So I'm actually amazed that you're grid displays properly in Firefox.
Anyway, check out what browsers support it and make sure you are overriding any default settings that need to be overridden.
i am working a a WP page and having some difficulties with what appears to be the margin on the HTML element.
it displays as expected in IE8, FF, Chrome, Mobile Safari and Opera.
this is the page in question:
http://www.mmmf.net/2012/
i am using basically the same CSS as a site also done with WP which is:
http://www.mmmf.net/2011/
the only difference is a newer version of WP.
i placed a purple border on HTML for reference. i believe it's a 28px difference.
any suggestions on this would be appreciated.
thanks.
I always add a yui css reset to avoid x-browser spacing issues. Do some research on it, spend the time to re-do your css with the css reset in place (place it above all other css).
http://developer.yahoo.com/yui/reset/