I am making one class example border-Radius, this class properly work in Firefox and Chrome.
But IE7 and 8 in border radius not working properly.
So How we can fix Border Radius Curves in IE7 or IE8
Border radius is a CSS3 feature which IE8 and below do not natively support.
You can take a look at http://css3pie.com/ which is a javascript library which mimics some of the CSS3 features that are available on modern browsers.
we are using pie for css3 property - It will take all browsers , check the link
http://css3pie.com/
border-radius is a css3 property, and IE7 or IE8 doesn't support css3. If you want to put border-radius that badly then please refer this siteCss3pie . :)
border-radius in NOT available in IE8 and lower. However, you have basically 3 options:
in case, it's not crucial not having these rounded borders: just omit it for non-supporting browsers.
use image-slices (e.g. sliding-door-technique)
use the proprietary .htc and VML to emulate rounded corners in IE. One famous and pretty solid framework for this is CSS3Pie (but there are several others, just pick the one you like)
Related
I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.
I am assigned a task and will create a pure css menu that works on all browsers including IE6 and 7. I have to use :hover pseudo class. As these classes are not supported in IE6 still is there are workaround for this using css? If yes please how to do it?
There are a number of tools available on the web for IE6 ~ IE7 pesky fallback.
Check this out:
http://selectivizr.com/
Or if you just want something smaller, look here:
IE6 ~ IE7 great css3 pseudo elements fallback
Good luck,
George!
Hi!
I have notice that some sites are using -moz-border-radius to get round cornors on elements? Is this a good practice? Are there any cons with it?
I would recommend adding "-webkit-border-radius" to cover Safari and Chrome, and "border-radius" to cover the CSS3 standard.
The only problem is IE8 won't support the rounded corners. But it looks nice in all other browsers.
Using border-radius (and it's browser specific friends -moz-border-radius and -webkit-border-radius) is the simplest strategy for getting rounded corners on elements. Because this method is standards compatible (and doesn't need ugly hacks such as positioned elements with backgrounds), it is the best way.
For the differences between -moz and -webkit, see this page at css3.info. This page also contains some more info about it.
Yes, border-radius is considered good practice. It's certainly a lot better than the alternatives such as messy JQuery stuff or worse, a set of corner graphics -- all the alternatives have major issues, ranging from non-scalability to messing up your backgrounds. border-radius is pure CSS and has none of these issues.
The only reason you wouldn't use it is lack of support in web browsers. However all the major browsers except IE now support border-radius. Some do still need a vendor prefix like -moz-, so you need to specify it several times but the functionality is basically the same across all browsers.
The one browser that doesn't support it is IE, up to version 8 (IE9 will support it, but isn't released yet). The good news is that there is a very nice little hack for IE that adds support for border-radius (and a few other features too), even to older versions like IE6.
The hack is called CSS3Pie, and is well worth taking a look at if you want to use this feature. It means you can use a modern CSS3 feature like border-radius without having to stress too much about your IE users.
Philosophically
The CSS property for border-radius is one of the best ways to achieve rounded corners anywhere on a website. IMO it is THE BEST way.
Although border-radius is not supported on across all browers/versions, I like to stick with using this property for almost all instances where rounded-corners are beneficial because rounded-corners are a decorative feature, so therefore not essential in instances where it is not supported, and also typically not worth the extra bandwidth of using an image based effect, or even a javascript hack like CSS3Pie.
This follows the "progressive-enhancement" rationale of web design. Users that have a modern browser supporting border-radius get to see them, other users don't. But a border radius is typically not an issue of accessibility or usability, so therefore implementing via CSS is the best route to go 95% of the time.
Practically
In practice using border-radius requires actually three properties to be supported across the majority of modern browsers:
div {
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
The first, border-radius is the actual property listed in the CSS3 spec, and one day will be the defacto implemented rule. But until widespread adoption is achieved and the spec is finalized, you still need to include the vendor-specific prefixes for -moz- (Mozilla Firefox) and -webkit- (Google Chrome and Apple Safari browsers).
Resources
http://border-radius.com/
Generates the proper rules / shorthand versions depending on what values you wish to apply and which corners you wish to round. Very handy.
http://www.css3.info/preview/rounded-border/
Some additional info about vendor support, how to use the shorthand, etc.
I have an issue with rounded corners in IE. There are white areas instead of transparent background. See image: http://dl.dropbox.com/u/72686/roundedIE.png
I'm using this jQuery plugin to create rounded corners: www.malsup.com/jquery/corner
And I'm also using transparency on each block.
thanks
You could try creating the rounded corners with CSS3 and then use CSS3 pie with internet explorer to get the rounded corners fixed.
EDIT:
Just read this on the malsup website you mentioned.
Recently I added support for native
border-radius rounding in browsers
that support it (Opera 10.5+, Firefox,
Safari, and Chrome). So in those
browsers the plugin simply sets a css
property on the element. But in IE,
we'll have to wait for version 9
before that is supported. And for all
browsers, choosing a pattern other
than "round" requires the use of the
"div stips" method.
For other readers, can this be an indication that this jQuery plug-in is based on the new css3 and html5 techniques?
I've solved with curvycorners.net
I am using moz-boder-radius(-webkit-border-top-left-radius) to add rounded divs to my website.
these work fine in Mozilla, chrome and safari but as usual Internet explorer have to have some problem.
Is there any such property to add rounded divs in Internet explorer.
This (jQuery plugin) works cross-browser:
http://jrc.rctonline.nl/
This is a standalone version, also works cross-browser:
http://www.dillerdesign.com/experiment/DD_roundies/
There's no way to get rounded corners with pure CSS in IE.
The -moz and -webkit properties are experimental, and not an official part of the CSS2. They are really meant to work for just Mozilla (Gecko) browsers, and may be phased out of those browsers too after a time.
I used this, it requires no images or javascript,just css:
http://blog.benogle.com/2009/04/29/css-round-corners/
With pure CSS there is no way to do that for IE!
But you can add a conditional comment (<!--[if IE]><![endif]-->) with some extra CSS which apply four rounded corner images to a "top" div and a "bottom" div contained in a main div!
I guess you are trying to use IE version lesser than 9.0.
The border-radius CSS property is supported only from IE 9.0 which brings the nice rounded rectangle.
https://developer.mozilla.org/en/CSS/border-radius
If you need to use rounded rectangle below IE 9.0, you may need to use images to achieve this.