I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
Related
in Mozilla Firefox 24 i cannot use -moz-border-radius on my CSS style.
i have read from this article, they said
Support for -moz-border-radius* and -moz-box-shadow has been removed. Authors should use unprefixed border-radius or box-shadow instead
but it is for Firefox 13, how about in version 24? anyway, thanks.
Use border-radius: 5px 30px;and box-shadow: 0 1px 4px #222; from now on
My understanding is that you can stack both properties, as long as you put the -moz version first. If a particular version of Firefox doesn't like border-radius, it will fall back to the -moz version. And if a version doesn't like the -moz property, it will be superceded by the second call. (this works with -webkit-border-radius as well)
-moz-border-radius: 10px;
border-radius: 10px;
Check this out
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility
#box{
border:10px solid #000;
border-radius: 10px 40px 40px 10px;
width: 200px;
height: 100px;
background-color:#ccc;
}
check http://jsfiddle.net/E7kYt/ in your FF
standard border radius for all browsers can be created in border-radius.com
I want to add rounded corners to my div in firefox.
Ive tried:
-moz-border-radius: 20px;
and its not working.
Pls, does anyone have any alternative solutions?
Thanks
newer versions of firefox support simply
border-radius: 20px;
Did you try that?
Otherwise I'll need to see some more of your css.
Put all the below three in your css
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Some older versions use -moz and -webkit , but recent browser releases adopt CSS3 way of styling.
source : http://www.the-art-of-web.com/css/border-radius/
As #vidiya mentioned
always make sure you cover all your basis:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
i'd suggest looking at LESS or SASS so that you can then use mixins (functions within CSS)
//From LESS
.rounded (#round:"4px") {
-moz-border-radius: #round;
-webkit-border-radius: #round;
border-radius: #round;
}
I have a question , i need something like this
background: -webkit-gradient(linear, left bottom, left top, from(#1e3c84), to(#2a5bd0)) #1CA6D6;
border-radius: 3px;
border-bottom: 3px solid #021748;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
-ms-border-radius: 3px;
margin-right: 5px;
But in CSS2 ? to show in IE correctly and other browsers
How i can do that? what is the properties or i can do with image? how? or something similar
very thanks!!
All modern browsers support rounded corners and gradient. The older versions of ie can support these features using scripts like css3pie.
Border radius doesn't work in older browsers... you will have to draw the corners yourself, slice them and then build the div or button yourself :)
http://caniuse.com/#search=border-radius
http://www.search-this.com/2007/02/12/css-liquid-round-corners/
Update
Or use #Sotiris link :)
Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;
Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.
IE9 however DOES understand border-radius
Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.
Download CSS3PIE at http://css3pie.com/download-latest
Save the .htc file in the root of your site
Lets say you have a div with the id of foo:
<div id="foo">Hello, I'm rounded</div>
Your CSS for this could be:
#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ }
You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);
This will cause CSS3 to apply your border-radius rules to IE6-8.
It will only work in IE9, and you have to use the CSS3 standard.
Support for "border-radius" in IE
-moz and -webkit won't work in IE ever, since they are for other render engines.
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8
I am trying to use the following two properties in my styles.css:
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
It comes up with the following message.
They are not known css properties.
You get that message beacause these are css3 properties.
To check it's validity use:
http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3
replace EXAMPLE.COM/STYLE.CSS with url to your css file.
If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.
an example for border-radius:
-webkit-border-radius: 5px; /* Safari and webkit */
border-radius: 5px; /* Opera, Chrome */
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */
an example for box shadow:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.
The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.
The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
You can check which browser supports what on Standardista.
I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.