Here is a code, which was supposed to display 6 columns equally distributed across the container's width:
http://jsfiddle.net/fstyh/
BUT:
IE10 (both pp2win7 and pp4win8) and Opera 11.60 clump such columns together in weird manner (like region flow), while IE9, Firefox12 and Chrome17 just stack them one after another.
Which browsers are correct ? IE10 and Opera, because they are newer ? Or Chrome and Firefox, because they have bigger market share together ?
Before you answer, check what happens in Opera, when you add some text to those columns. (it's transparent, but works just fine to show effect). IE10 does not react to it, in any way.
I was not able to find anything in the spec. Hopefully, anyone can help.
Oops, it turns out that both mozilla and webkit still need vendor prefixes for multicolumn properties and values.
http://jsfiddle.net/fstyh/1/
Related
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
The div containing the slider on this site http://mhpkg.de is offset by 1px to the left in opera. Other browsers don't seem to have this issue and I can't figure out what is causing this. I had something like this on another site/ occasion too so this doesn't appear to be too rare. I couldn't find a solution to this though so I figured maybe someone did.
Please take a look and help me/ people with similar problem out.
Apparenlty this has something to do with the zoom on my opera browser, I checked it on different systems/ versions (browsershots) and it is fine there. If i zoom in and out on Opera it displays it fine/ offset by 1 px depending on the zoom degree.
Here's a screenshot of the website I'm coding in 4 browsers: http://img801.imageshack.us/img801/2510/browsersj.jpg
There are CSS3 columns (in IE, there's a jQuery plugin simulating the CSS3 columns behaviour). As you can see, Opera and Firefox render the first column slightly lowered in relation to the other columns. This is the first paragraph's margin. Chrome ignores the first paragraph's margin and aligns everything correctly.
I have found that this CSS rule helps to eliminate the issue:
.column-3 > *:first-child { margin-top: 0; }
Still, I find this a bit hacky (what if I WANT the first element to retain the margin in some specific scenario?). Do you happen to know of any other solutions to this problem (preferably something clean and reliable, sort of like the box-sizing property taking care of different default box models in different browsers)?
[EDIT]
Alright, I have found that in Firefox, the issue was an overflow:hidden; set on the container div. Removing it solved the issue.
Still, Opera won't cooperate.
As per #Kyle's request, here's the code to reproduce the issue in Opera: http://jsfiddle.net/LVqtD/1/
not sure if it's still actual, but i did some reading and doctype might be the reason.
http://www.opera.com/docs/specs/presto28/doctypes/
just sayin'
Good morning all.
Today I'm struggling with the following code: source on jsFiddle
What I have been trying to achieve is a seemingly simple image rollover effect where 'a mirror' of an image covers the original one using some css3 effects.
Chrome 12 transforms the image perfectly
Firefox 5 stops transformation when the image runs into mouse cursor
IE9 - there is no transformation at all, the image is just shaking
Opera - not checked
How do I do this cross-browser compatible?
I think I got it to work in Firefox 5 the way you want. See http://jsfiddle.net/X2eN6/7/
According to CanIUse.com, IE9 doesn't support CSS3 Transitions, so I guess that's why it's not working for you in IE9.
The browsers that support the feature are Firefox (from v4), Chrome, Safari and Opera. But it's worth pointing out that transitions currently require a vendor prefix in all browsers that support them.
A vendor prefix means one of two things: either the spec is not finalised yet, so the feature is subject to possible change in syntax, or else the browser's own support for the feature is not yet considered complete.
Chrome has been supporting transitions for ages, so it's no surprise that everything works there. Firefox has only recently added it, so since they require a vendor prefix, you should take that as a warning that things may not be guaranteed to work 100%.
I am redesigning a website and finding problems with small rendering differences between IE FF and Chrome. Am using CSS and . Is there any way to avoid these differences?
Also, even when I fix the diffences, FF still ocassionally renders incorrectly on some computers. It doesn't appear to be resolution related but only ocurrs on laptops with 15" screens or smaller.
Any ideas or input welcome as I would prefer not to have these differences in the first place to avoid having to make numerous tweaks to fix. Thanks
Different browsers, and different versions of browsers render HTML and CSS differently.
There is no one way to create a web page that will make it look the same in all browsers.
You simply must pick a subset of browsers you wish to support (such as IE6+, FF3.5+, Chrome 9+) and make them look as good as possible in those browsers.
You will never get it exactly the same in all browsers.