• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

allow this to have circular borders on ie9

this works for non ie broswers
but I want it to work on ie9

want circular borders

around the camera picture and the title and the price

this is the 105x105 camera

http://filedb.experts-exchange.com/incoming/2011/09_w37/t495892/canon-550d.gif

and this is the border around the image with rounded edges

http://filedb.experts-exchange.com/incoming/2011/09_w37/t495891/border.jpg




I found a link that says to add this to make work with ie
border-radius: 15px 15px 15px 15px; /* for some reason you have to declare all corners in ie*/
but it did not work for me




please edit the css to see if it works with ie
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style> 
#product {
        margin:5px 15%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
}
#product:hover{
  width:140px;
  height:190px;
  border:1px solid #333;  
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
</style>

</head>

<body>

<div id="product">
	<div class="title">Camera</div>
	<img src="images/canon-550d.gif" alt="Camera" />
	<div class="price">$300</div>
</div>
<div id="product">
	<div class="title">Camera</div>
	<img src="images/canon-550d.gif" alt="Camera" />
	<div class="price">$300</div>
</div>
<div id="product">
	<div class="title">Camera</div>
	<img src="images/canon-550d.gif" alt="Camera" />
	<div class="price">$300</div>
</div>

</body>
</html>

Open in new window

0
rgb192
Asked:
rgb192
  • 8
  • 5
  • 2
  • +1
1 Solution
 
SSupremeCommented:
Read last section here: http://dimox.net/cross-browser-border-radius-rounded-corners/
It will provide you method how to apply border-radius for all IE versions.
0
 
rgb192Author Commented:
I dont understand

Download the border-radius.htc file, put it somewhere on your site, and then use this CSS code:

how could I apply to the code that is attached at the top
0
 
SSupremeCommented:
#product {
  behavior: url(http://yoursite.com/border-radius.htc);
}
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
rgb192Author Commented:
i added the file to the same directory

behavior: url(border-radius.htc);


and changed the code for all borders

still doesnt work in ie
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style> 
#product {
  behavior: url(border-radius.htc);
        margin:5px 15%;
border-radius: 5px 15px 15px 15px;
-moz-border-radius:5px 15px 15px 15px;
-webkit-border-radius:5px 15px 15px 15px;
border:1px solid #999;
}
#product:hover{
  width:140px;
  height:190px;
  border:1px solid #333;  
  -moz-border-radius: 5px 15px 15px 15px;
  border-radius: 5px 15px 15px 15px;
}

#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
</style>

</head>

<body>

<div id="product">
  <div class="title">Camera</div>
  <img src="images/canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="images/canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="images/canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>

</body>
</html>

Open in new window

0
 
rgb192Author Commented:
i downloaded file
http://curved-corner.googlecode.com/files/border-radius.htc

I needed to put it in same folder as my file
0
 
SSupremeCommented:
yes, you are right. Put it where your html file is.
0
 
rgb192Author Commented:
but it doesnt create circular borders in ie for me.

css file (the last file I have attached)
needs to be changed
0
 
SSupremeCommented:
0
 
rgb192Author Commented:
I can not download because I am not rapidshare customer.  Could you upload
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
Can u use tables, you need to four images all 4 rounded images and that way you can create a rounded border for your every single item rather than using the .htc file, i have used this file but this file has some issues if you use jquery within it

:)
0
 
David S.Commented:
rgb192, your code works fine in IE9 for me. However, I do see an error in your code. Are you aware that multiple HTML elements may not have the same ID?

While IE9 is active press the F12 key to open the developer tools and then make sure that both the browser and document modes are set to IE9.

border-radius.htc is for IE8, IE7, and IE6. There's no need for it in IE9.
0
 
rgb192Author Commented:
the code does not work for me

what changes have to be made to the code
0
 
David S.Commented:
If you did the two things I suggested previously, the next thing to do would be to run Windows Update to make sure you have the most recent version of IE available (for your version of Windows).
0
 
rgb192Author Commented:
>>However, I do see an error in your code. Are you aware that multiple HTML elements may not have the same ID?


what change do I have to make.   I tried viewing on multiple computers in ie9 and I do not see circular borders
0
 
SSupremeCommented:
You don't need to be rapidshare customer (you should at least try to download). Just download it and see that it is the answer for you question. https://rapidshare.com/files/531432682/border-radius.rar
Here screenshots that solution works for IE5,6,7,8
 IE5 IE7 IE8
0
 
rgb192Author Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 8
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now