I am a newbie in web development. I made a CSS drop-down menu using CSS3 and CSS3PIE (css3pie.com), but the drop-down doesn't work in IE6 and Firefox.
Usually this technique works in both browsers, without using CSS3 and PIE.
Does PIE have problems with CSS drop-down technique? How to fix this problem?
Here is my code (I use "if lte IE 6" hack in the code):
http://jsfiddle.net/NjQGt/
And this is where you can get CSS3PIE (PIE.htc): http://css3pie.com/download-latest
Thanks in advance. :)
Have you made sure that the elements that PIE is used with are have position:relative set for them?
If not, make sure you've read everything here: http://css3pie.com. You might end up deciding that for such an old browser it's not worth having rounded corners and shadows – it's not exactly vital, and users of older browsers probably would prefer things to be quick rather than pretty.
Related
I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.
The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.
What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.
Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.
You can use a script to perform that "support" for you on clients using old IE versions!
Download script here.
This script allows CSS3 support for Internet Explorer 6, 7, and 8.
The web site link!
My favourite solution to this problem is CSS3 PIE. It's an HTC which brings
a nice selection of CSS3 features to IE 6-9.
Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).
I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:
http://jquery.malsup.com/corner/
modernizr can be a good tool too!
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
I'm looking for the best solution out there for round corners on boxes, which have to work in all browsers (including IE 7-9)
I've been looking on CSS3 PIE, which seemed promising until I saw the list of "Known Issues". Relative paths and z-index problems made me look for other solutions. I noticed they have a "JS Solution" for CSS3 PIE as well, but this has some big disadvantages as well..
Are there any other good solutions out there for round corners crossbrowser-wise?
There is NO pure CSS solution for all browsers, you will have to create this using images, either using a Javascript solution or CSS code that includes the rounded images.
Blame IE7-9 for the non CSS3 solutions...
here you have a guide to create round borders for all browsers
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
The best i can suggest is
border-radius: 5px;
I know it doesn't work in all browsers, but it's a CSS3 feature, so sooner or later it will work in all browsers.
here you can see it works for all major browsers
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
and it works in IE9 too
It's not exactly the answer you're looking for (honestly, if you really want IE7-8 support, CSSPIE is pretty decent).
I've been using prefix-free on my sites as of late so I don't have to worry about vendor support. Just use what CSS3 you want and the js takes care of adding all the pre-fixes where necessary. If/when vendors all support CSS3 properties, just remove the JS file instead of combing through your css and removing all the prefixed parts.
Since you have incuded IE7 above, so I would say there is no pure CSS solution to acheive this. Modern browsers support border-radius to achieve rounded corners and you need to specify the -moz and -webkit for mozilla and webkit based browsers.
To achieve rounded corners, I would suggest you put all your rounded cornners in one image and make an sprite of this. then use background-position to get it working across all the range of browsers out there, including our good old friend IE6.
As of this writing, I don't think that there are any other "good" solutions for cross-browser rounded corners. I have searched high and low and CSSPIE is the best solution I have found. The "known issues" are not nearly as bad as the alternative of having crummy looking pages in IE or resorting to images for everything.
The path issues you are experiencing probably have to do with the fact that the PIE.htc path is relative to the document you are viewing, and not the CSS file that calls it. Just be sure to check that and you should be in good shape.
z-index issues are probably related to children of a PIE border-radius parent not having a -pie-watch-ancestors value set. Alternately, you could just call the PIE behavior again separately on the children.
CSS3PIE takes a little getting used to, particularly if you are trying to get it working with .less files, or on shived html5 elements, or if you're running IE in Parallels on a Mac. There are a lot of things that can go wrong in these scenarios. I honestly believe, though, that PIE is your best bet. If at first you don't succeed, don't give up. You CAN get border-radius working in older versions of IE, along with other essential enhancements like gradients, box-shadows and the like.
I believe the link below works in most browsers and that Facebook did something like this for a week to add a rounded style to their site, and then they realized it takes awhile to load up the corners for IE people.
http://jquery.malsup.com/corner/
Are there any methods out there that do not use images to implement rounded box. That also works in all the IE browsers.
Short answer: No.
Long answer: Not for every version of IE. But: why would you bother showing round corners to all browser? Sites like Twitter have just gave up on that: you don't have a good modern browser? You don't get to see my iCandy.
There are several VML and HTC-based hacks out there, including DD_roundies - searching Google for Internet Explorer Rounded Corners CSS or Internet Explorer Border Radius CSS should get you some other results.
Personally, I just allow Internet Explorer to render my pages differently: http://dowebsitesneedtolookexactlythesameineverybrowser.com/
I like to use jQuery corner plugin, if it is using IE, it creates some divs with backgroud, but if it using another browser like Chrome, or Firefox it uses a the native CSS atribute "radius".
Also this plugin can create a lot of interesting effects for your corners.
Take a look, and good luck.
Found this site. Works like a charm.
http://css3pie.com/
You can try this : CurvyCorners
This method does not use images and works everywhere but uses a LOT of code to do it:
http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm
This may not directly address your specific request, but it is a point worth discussing.
If it's not a do-or-die requirement to have rounded corners in IE, it's actually ok to be comfortable with the fact that you won't have rounded corners for IE users. The benefits you gain with going with CSS3 rounded corners (small code, easy maintainability, tight control) outweigh the potential of an IE user being disappointed he or she didn't get the rounded corners.
how to apply a effect like the photo below to image by using CSS or something else?
thanks!
You need to use CSS 3d transforms. They aren't well supported right now, but they will work in Webkit browsers, including iOS.
I don't know of anyone who has tackled that example already (apart from the Safari team evidently!), but here is some recommended reading.
http://blog.persistent.info/2010/11/distortion-grid-using-css-3d-transforms.html
http://www.webkit.org/blog/386/3d-transforms/
http://www.w3.org/TR/css3-3d-transforms/