I'm not allowed to delete this question so just ignore it
In IE10, quirks mode, gradients now -ARE- appearing without my having to change anything. This is using the DXFilter, which I don't understand as the option is switched off and according to microsoft DXFilters now don't work in the internet zone?
(I missed out the 10 on IE10, question may make a little more sense now)
We have a site that is in IE6 quirks mode, it represents 10 years+ of development, has over 100 pages and realistically can't be changed without months of effort.
I need a css equivalent of gradients/addCone. At the moment I have a lot of info on the page, this cone appears in a tablecell, perhaps 20 of them. I looked at SVG but not sure thats a good fit as it seems quite verbose
Graphically I just want a gradient and a ball in the tablecell
It's arkward because if it was not in quirks mode we could use css3 but I don't think those features are available in quirks mode, but DX Filters have been taken away anyway
Any suggestions?
thanks
(addition, just found http://css3pie.com/ and a gradient of some description is appearing in quirks mode in IE10 so fingers crossed)
Ok, heres what I found
IE10 has withdrawn support for DXFilters, but you can put them back on in the browser. This can be set as a group policy
Internet Options-> Security-> Internet -> Custom Level -> Misc -> Enable Legacy Filters
SVG doesn't work in quirks mode, even if it did it wouldn't help as I need a graphical effect in HTML but SVG in IE10 doesn't allow mixing (it does in other browsers)
Gradients are in IE10, again don't work in quirks mode
css3pie implements gradients as (I think) VML, and it appears to work. The only thing you might have to tweak is to use position: relative in whatever container you're putting the CSS on
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
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 getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
There are some eye-candy experimental CSS like border-radius (rounded corners) and gradients that I wish to use on my page. Unfortunately Internet Explorer does not support any of that yet. At least border-radius is coming on IE9, no word on gradients yet.
So would you recommend just leaving IE alone (most of my users will be on FF or Chrome anyways) or use images to "fix" the presentation for IE? Is it even worth it? Because I know that not only is a pain in the behind but might also break styling on other browsers.
So, to hack or not to hack?
Although this question is a bit subjective, my answer would be not to hack. CSS3 was made to be backwards compatible, and that means it will degrade gracefully if a browser doesn't support it. That for me is the way it should be. I mean, why use CSS3 if you're still planning to hack it anyway? In that case just use the plain old CSS2 tricks like javascript rounded corners or images so you do't have to hack per se.
Terminology quibble: using images to imitate CSS3 features in IE isn’t really hacking. Any visual effect that isn’t directly supported in CSS will need to be implemented in images.
But to answer your question, it depends:
If few enough of your audience use IE, then you can ignore it. Figuring out how few is few enough is up to you/the site owners.
If not:
If the border-radius effects aren’t a key part of the site’s branding, then I’d suggest you just let IE ignore them and use square corners. No-one browses the web with two browsers simultaneously, and no-one cares if your site looks a little bit different in IE 6, as long as the buttons are in the same place and everything works.
If they are a key part of the site’s branding, or your client insists on the site looking the same in IE 6, then you’ve got to achieve the look in IE 6. So, either:
use border-radius, and use conditional comments to include a stylesheet for IE 8 and below with code to imitate the features
don’t bother with border-radius — use the code that works in IE for all browsers. This will avoid you having to maintain two sets of code, but it will mean that all browsers have to download the images you’re using for IE, thus making them perform slightly less well.
I don't think its ever a choice between 'hacking' and not implementing it at all across all browsers, and I'm surprised nobody has mentioned one of the real life-saving 'feature' (I won't consider it a hack, since it is a brilliant method for backward compatibility): Conditional Comments
Not only does it help with annoying IE bugs, it also allows you to define less desirable, but still 100% valid methods for getting certain effects to work, like image gradients with repeat-y instead of CSS3 gradients, or tiled semi-transparent pngs for IE7 and 8. Really, if you want to, IE shouldn't be the one single factor that will limit your ability to experiment with CSS3.
if you do not want images, IE hacks or a seperate stylesheet you could always check out CSS3Pie: http://css3pie.com/. It's not perfect, especially not when you want some gradients & shadows but it can deal with rounded corners pretty easily. There are similar IE behaviors out there but I think this one has the most active development at the moment.
There are hacks and then there are hacks. I interpret a "hack" as being something that exploits a flaw in the browser, such as the descendant selector hack in IE (using >). Those types of things break when the browser is updated.
I don't consider using images to create nice drop shadows or gradients to be a hack. It may not satisfy the requirements that you are doing everything semantically, and you may feel queasy about resorting to using an image for something that an image should not be required for, but the reality is that there's simply no choice - no way to do everything the clean, no-images way - if you want pretty gradients and shadows on the majority of people's browsers (Internet Explorer being that majority).
If you consider the rounded borders or gradients to be just optional eye-candy then by all means don't worry about IE. But if you consider that it actually does make your design look good and you don't want the majority of your users* to miss out, then go for it.
*Depending on your audience, IE may or may not make up a majority of your audience I guess.
That really depends on how important those features are to the look and feel of the site, or rather how important the client and design team feel they are. Additionally its a quation of how much is this going to bloat your markup and CSS - ie. depending on how the effects need to be built in the context of the design how much of a hassle is it going to be?
Normally in this case im in favor of progressive enhancment, ie. come up with something suitable but it doesnt need to be a 1-to-1 to the composite art. Again though, this is a decision you as a developer will ever really be in a position to make on your own (well, unless youre also the designer).
I just noticed that Stack Overflow employs Firefox only CSS to round the corners of the user badges on the front page. It's an interesting idea but what would be the pitfalls and advantages of using Firefox only CSS (aside from the blatantly obvious ones)?
-moz-border-radius:6px;
-webkit-border-radius:6px;
Above: The CSS used to round corners on the Stack Overflow front page.
The main problem would be, as I see it, that your css wouldn't validate. Other than that I see no reason why not to use this type of platform specific features as they don't cause any harm to users whose browsers don't support the features.
The advantages are that it's much easier than using corner images or other tricks. The obvious disadvantage is that your page doesn't render as intended on IE, which is still used by more than half the world's web users.
Overall it's situational; I imagine SO gets a higher than usual proportion of people using Firefox, so the IE issue is not as relevant. And rounded corners are a minor visual improvement, so if some people see it and some don't, it's not that big a deal.
I agree with BeefTurkey.
I might even go further and call it a case of Progressive Enhancement with CSS. To borrow liberally from Understanding Progressive Enhancement, I'd consider rounded corners to be part of the colorful candy coating around the chocolate-covered peanut.
And eventually CSS3 will be ratified and border-radius will be standardized. -moz, -webkit and -ms prefixed styles can be removed and replaced with their standard equivalents. Your CSS will validate and people using browsers that don't support CSS3 will still have a completely acceptable experience with people using browsers that do support CSS3 will get an enhanced experience.
Alternatively you could continue to use the proprietary CSS in addition to any standards to give an enhanced experience to an even larger audience. It would really depend on how much effort maintaining all that CSS requires and how important you feel the enhanced experience is to your audience.
It works in Firefox and the Webkit-based browsers (notably Safari and Chrome). There are no alternatives for IE or Opera.
The main reason to use it is when you want to give rounded corners to elements that display on top of patterned or unpredictable backgrounds, which is not possible otherwise. Normal CSS and images can take care of other situations.
It's also ridiculously easy to implement and surely works for more than half the people on this site.
Pitfalls are of course that it's not supported in other browsers and its not in the W3C specification.
The current implementation is bad (both in firefox and webkit) since they do not share the syntax.