i know border-radius property wont support in IE7.
Is there any css tricks to do border-radius in IE7 browsers.
You can use CSS3 PIE to get this working.
To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:
behavior: url(path/to/PIE.htc);
In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.
NOTE:
If it's not working still then add this to your selectors:
position: relative;
z-index: 0;
There are plenty of "tricks" to get rounded corners in browsers that do not support the "border-radius" CSS property. Just do a google search for "rounded corners css". This one seems promising for instance.
Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius.
Check this http://css3pie.com/
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....
use that code for border-radius working well ....
**
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
**
and also see for border-radius http://css3pie.com/
given in detail in document
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make rounded border in IE8 with CSS?
I set this code for Border. I need to set rounded corners for this border.
This code works with E9, I need it to work in old browser like IE6, IE7, IE8
My code in CSS
border-radius: 11px 11px;
border:1px solid #373737;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
I suggest CSS3 PIE - http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the
most useful CSS3 decoration features.
There is no support of border-radius in older browsers, you got to use scripts such as CSS3Pie to get it working in them.
Be aware that in your CSS, you will have to use behaviour property which isn't valid and will cause your CSS not to validate against W3C Validator.
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/
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
Is it possible to make the corners of a thumbnail rounded using css?
EDIT - The html starting point is:
<img src='test.jpg' width='50' height='50' />
It has no css on it at the start and I be wanting to round the corners a little...
EDIT+NOTE: The moz-border method doesn't really round the corners of the image itself, which is what I was hoping for, instead it rounds the corners of a boarder square around the images. Looks ok...
To expand #Clayton's answer:
You can do it natively in any modern browser:
-moz-border-radius: 5px;
border-radius: 5px;
The vendor prefix -moz will likely disappear soon.
See this jsfiddle to see it in action. Notice, also, that the rounding is applied directly to the <img> element.
This works in all current versions of all 5 major browsers.
To phrase this better, the following two lines will achieve the desired effect in Firefox, Chrome, and IE9.
-moz-border-radius: 5px;
border-radius: 5px;
More information can be found here:
http://www.css3.info/preview/rounded-border/
To accomplish this in IE8, you will need to use javascript. This jquery plugin would do the trick: http://jquery.malsup.com/corner/
You can use border-radius. It doesn't work on <img> elements, but you could apply border-radius to a <div> with the image as the background-image.
This code will round all four corners and it also supports Opera.
img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
Clayton's solution only rounds the top two corners, which may or may not be what you're looking for.
Yes using the nifty-corners technique. Nifty corners is an old way to produce rounded edges. It will function in all browsers (old and new browsers)
http://www.html.it/articoli/nifty/index.html
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.