i saw a code for border radius in ie(-8) but i cant find it.
evry where is only by jquery or behavior: url(PIE.htc);
for example for box shadow this code is:
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=140, Color='#d3d2d2')";
/*For IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=140, Color='#d3d2d2');
or for opacity:
filter:alpha(opacity=70);
who can help me for finding that code, please?
As far as I know, IE8 does not support rounded corners natively. You have to use jQuery or a CSS3 filler.
So any version of Internet Explorer lower than 9 doesn't support rounded corners.
Your options are:
Use rounded corner images, nice plugin here.
Use CSS3 Pie (which you don't want to use)
Use a JQuery Plugin (which you don't want to use as well)
An IE CSS3 Plugin - which provides CSS3 selectors for IE6/7/8
Note that option 4 provides both box shadow and rounded corners.
Related
I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/
Can anyone tell me the the latest solution for implementing rounded corners with DIV tags? Is the PNG corner images still the best cross-browser solution? Is Jquery the best approach? How is everyone approaching the rounded corners problem?
Many thanks.
Erik
For most browsers, CSS3 provides a way.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
No need for images anymore.
If you must support IE8 and earlier, here are a number of ways to accomplish rounded corners.
According to that Microsoft page:
Windows Internet Explorer 9
supports adding rounded corners to
elements using the border-radius
properties.
It also suggests these pages which claim to be updated:
25 Rounded Corners Techniques with CSS
CSS Rounded Corners 'Roundup'
Rounded Corners
Without having read all of these many approaches, I'd hazard a guess that there is no universal best solution at the moment. Until we can assume that pretty much all of our visitors have CSS3-compliant browsers, you have to make some choices.
The optimal solution at the moment is to use:
selector {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
That will work in "all" modern browsers including IE9, see: http://caniuse.com/#search=border-radius
By far the best workaround for older versions of IE is to use CSS3 PIE:
PIE makes Internet Explorer 6-8
capable of rendering several of the
most useful CSS3 decoration features.
PIE currently has full or partial
support for the following CSS3
features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
As you can see, you also get support for more CSS3 eye candy
I want to create a HTML button with rounded corner and elliptical shape without image.
What is the way to do it?
This makes all sides rounded:
border-radius:40px;
This makes them elliptical:
border-radius:40px/24px;
Have a look here to see:
http://jsfiddle.net/xnTZq/
Or with some extra ugly fanciness:
http://jsfiddle.net/xnTZq/6/
-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;
#box-1 {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-border-radius:10px;
}
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
This is a very useful article to read if you need more help with this:
http://www.css3.info/preview/rounded-border/
Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/ ) http://border-radius.com/
koolies
I would like to know how to make rounded border in IE8. I'm using
-moz-border-radius:4px;
-webkit-border-radius:4px;
for mozilla and safari.
There's a jQuery plugin for that. http://jquery.malsup.com/corner/
Download https://code.google.com/p/curved-corner/ and include in your project. Then use the following css to have rounded corner.
For example:
.somediv{
-webkit-border-radius:4px; /* older webkit based browsers */
-khtml-border-radius:4px; /* older khtml based browsers */
-moz-border-radius:4px; /* older firefox */
border-radius:4px; /* standard */
behavior: url(border-radius.htc); /* IE 6-8 */
}
The url to the file is relative to the HTML file which loads the CSS. So this is different to background: url(...) behavior which is relative to the CSS file. More details here
You can't. IE doesn''t handle modern standards and practices and, specifically, no such CSS property exists in IE8.
In IE9 you can use border-radius.
For the older IE versions, there are javascript libraries that will do it for you. You can't do it purely with CSS. At the very least you will need background images.
You can use CSS3 PIE for this. It's easy to implement. Just download it here: http://css3pie.com/download/ and extract its contents.
Then, on your stylesheet, just put behavior:url(css3pie/PIE.htc); along with the css codes of each element that uses border-radius.
For example:
.samplediv{
behavior:url(css3pie/PIE.htc);
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
I have boxes that have been designed like this
Basically I need to code them so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.
Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)
If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/
To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.
The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.
If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I can't help with box shadows in IE, I'm afraid.
Actually, IE has a proprietary CSS extension that allows you to add shadows:
.shadowed {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)
DD_Roundies Website
As for other browsers, you can use this:
/*************************************************/
/* The properties follow this format: */
/* property-name: x-offset y-offset blur #color; */
/*************************************************/
box-shadow: 0 0 4px #000; /* For Opera */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
I would strongly recommend CSS3Pie (works in IE6-9).