Jump to content
Sign in to follow this  
Gavin_

Round Corners IE using CSS / HTC

Recommended Posts

Gavin_

Hi All On this website http://79.170.44.87/curoresourcing.co.uk/ We have added the

behavior: url(/PIE-1.0beta5/PIE.htc); 

to get rounded corners in IE but we can't get it to work. has anyone been able to get it to work? thanks in advance

Share this post


Link to post
Share on other sites
Danny
Hi Gavin, I thought IE supported border-radius ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Gavin_
not sure about that Danny my client can't see the rounded corners in IE 8 or 9 i found the pie /htc thing through a blog post of Adam's but can't get it to work...

Share this post


Link to post
Share on other sites
Danny
OK i'll check it out for you, but why do people still use IE, it's such a naff browser. *Update, I just did a test and IE9 supports border-radius, however I think IE8 doesn't and that's why you're using the .htc file. http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx I found this for you too, which may assist you, but I'm sure if you have seen this already. http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Gavin_
Thanks Danny I think we got further than that - we used the pie we found here http://css3pie.com/ not sure if we have set it up right or if there is another conflict happening. any ideas from anyone?

Share this post


Link to post
Share on other sites
Rob
Have you seen these? [url="http://codecamel.com/round"]http://codecamel.com/round [/url], [url="http://dimox.net/cross-browser-border-radius-rounded-corners/"]http://dimox.net/cross-browser-border-radius-rounded-corners/[/url] And this, which helped me create rounded corners on my own site: [url="http://css-tricks.com/snippets/css/rounded-corners/"]http://css-tricks.com/snippets/css/rounded-corners/[/url] all of which worked on IE 7, 8 and 9 as well as Firefox, Chrome, Opera, and Safari.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Gavin_
@Catrina and @rangelone here is an example of the code we are using [code]#fbox_9 {margin-left: 18px; background: #98d1ea; /* Old browsers */ background: -moz-linear-gradient(top, #98d1ea 0%, #41b7ea 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98d1ea), color-stop(100%,#41b7ea)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #98d1ea 0%,#41b7ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #98d1ea 0%,#41b7ea 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #98d1ea 0%,#41b7ea 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d1ea', endColorstr='#41b7ea',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #98d1ea 0%,#41b7ea 100%); /* W3C */ -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-border-radius: 12px; -khtml-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; border-style:solid; border-width:1px; border-color: #33B3EA; behavior: url(PIE-1.0beta5/PIE.htc); } [/code] as you can see we are already using the border radius variants for multiple browsers but get strange results - we see both straight and rounded corners!! thanks for all help

Share this post


Link to post
Share on other sites
Gavin_
Here is Adam's blog http://adammunns.com/ie-6-rounded-corners-for-wordpress-using-css3-pie/ and another example of code we are using [code].mcolumn-pad {background: none repeat scroll 0 0 #FFFFFF; -webkit-border-radius: 7px; -khtml-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border-style:solid; border-width:1px; border-color: #B5BAB2; behavior: url(PIE-1.0beta5/PIE.htc); margin-right: 10px; } [/code] this one seems to work - so maybe it is the gradient fill that is breaking it? BTW this is all on the latest Pagelines framework thanks again for all help

Share this post


Link to post
Share on other sites
catrina
It might be the gradient fill. You can try removing it to see if it makes a difference.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Gavin_
Yes i think it is now working i don't have IE - i'm using http://netrenderer.com/index.php to generate an image and it looks ok is there a way to have gradient fills and rounded corners in IE?

Share this post


Link to post
Share on other sites
Rob
Unfortunately in IE 6 and 7, I do not believe that will work dynamically, but would graphically. Essentially, you'd need a graphic image of the gradient as the background of the object being rounded. This begs the question, 'why not just use a graphic for the rounded corners' which I'm sure you've already contemplated. Unfortunately, because IE 6, 7 and 8 are no longer popular, support for them is waning rapidly. I'd suggest recommending to your client that they not worry too much about the older versions of IE. For example, IE 6 is used by less than 1.2% of all Internet users and IE 7 is used by less than 3.4%. Most of those are in remote places where Internet use is very limited.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Gavin_
Thanks Rangelone, i am not sure what is wrong with our CSS but in IE 8 and IE 9 when we use gradient fill and rounded corners it doesn't work.

Share this post


Link to post
Share on other sites
Rob
It's possible that the URL for your HTC is incomplete. The browser may be looking for a location following the URL of your page. Remember, different browsers render things differently and often by reading code differently. So, if you are on www.yoursite.com/blog Firefox would possibly see the URL in your CSS as being in the root. Where IE may view the link at the end of the URL... i.e. www.yoursite.com/blog/urlto.htc and not finding it, fails. Because it's not a real URL, it may not return a 404 but just fail to render. Try adding the full URL to the HTC info and see if that helps.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Gavin_
tried tightening up the path but not getting any joy. once the site is live will re-test to see if it is the domain reference that is interfering thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×