PDA

View Full Version : Border not displaying in IE...sometimes



corsal
Sep 12th, 2010, 12:07 PM
Developing a page:
Milk chocolate buttons (http://www.maels.org/ohstest/shop/grocery/treats/chocolates.html?page=shop.product_details&flypage=flypage_fairtrade.tpl&product_id=88&category_id=69)

Problem is: to create rounded corners in boxes for IE I am using
behavior: border-radius: 20px;
behavior: url (....../border-radius.htc);

Using -moz-, -webkit-, & -khtml- for the other browsers. The rounded borders display correctly in Firefox, Chrome, Safari...and they display well in IE7&8 all across the website.

Except for one column on the right hand side. The right and bottom border does not display in IE (amazingly, the 4 round corners do, however!). I can't figure why. Driving me crazy!

Another funny one: the border surrounding the chocolate buttons picture
<div class="ftproduct_image"> displays well in all browsers except in IE8. Why could something display well in IE7 but not in IE8? This is a new for me.

Any ideas welcomed! At least any pointers to things I could look at

effpeetee
Sep 12th, 2010, 01:27 PM
As far as I know, IE does not yet support border-radius.

Frank

corsal
Sep 12th, 2010, 01:46 PM
Thank you effpeetee. You are right, IE does not support border-radius, they promised it will support it in IE9 :rolleyes:.

However, you can get round this by placing a file called border-radius.htc [easy to find in the web] somewhere in your website folder and link to it using
behavior: url (....../border-radius.htc);
Once you have done that border-radius: 20px; will work for IE 7 & 8.

The method works because, as you can see, I have round borders in most boxes in the website, chek the URL I sent. Except in the that right hand side column called Suppliers where the right hand side and bottom border is missing. The top and left display fine borders including the rounded corners. So the problem must be something in my CSS for the container(s) that hld that column. Perhaps the width, perhaps positioning... I do not know but it is driving me insane.

effpeetee
Sep 12th, 2010, 02:01 PM
Thanks, I didn't know that. I'll look into it.

I'll try it with your
My Sources program (http://www.exitfegs.co.uk/Sources.html) (in my signature) is using HTML5 and CSS3 which works in every other browser but IE. Typical of Microsoft.
I'll try it with the procedures you mention.

Frank

corsal
Sep 12th, 2010, 02:29 PM
This is where I got the idea from
jonraasch.com/blog (http://jonraasch.com/blog/css-rounded-corners-in-all-browsers)

and the htc file can be downloaded from here code.google.com/p/curved-corner (http://code.google.com/p/curved-corner/)

effpeetee
Sep 12th, 2010, 02:39 PM
I must be tired. I just can't understand how to deal with this program I keep getting into dead-ends. Something that I am missing obviously. So far I have managed to get an image on screen - an ornamentle rectangle, but nothing else.Any further help welcomed.

Frank

corsal
Sep 12th, 2010, 04:15 PM
Hi, I really need help on my problem so I would not like this thread to be about how to learn to do round boxes using border-radius.htc. I will be happy to help anybody who wants this, as long as it is in a different thread.

Having said that, I hope it did not sound rude, perhaps the following will help you

/*This gives you rounded corners for any item classed class="yourbox" in FF, Ch, Sf */
.yourbox {
border: 1px solid #000000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

/*This gives you rounded corners for any item classed class="yourbox" in IE */
.yourbox {
behavior: url (http://www.yoursite.com/path/subpath/border-radius.htc);
border-radius: 20px;
}

Be aware the main problem is the path to the border-radius.htc file. I tried several things and I always thought this would not work until i discovered the only way to make it work for me was having the full path including the http. Relative paths were not working for me.

effpeetee
Sep 12th, 2010, 05:16 PM
Yes. I am sorry, I wandered and I should know better. I will persevere and if I can find an answer to your post I will come back.
Regards.

Frank

corsal
Sep 12th, 2010, 07:37 PM
Thank you effpeetee, and I repeat, let me know if you need help or you open a thread about border-radius.htc. The method works and is a simple way to have rounded borders. My congrats to whoever developed the method, impressively clever

effpeetee
Sep 14th, 2010, 02:43 PM
corsal.

I have opened a thread about this on this forum (http://www.codingforums.com/showthread.php?t=204522). Any further help gladly received.

Frank