?
Solved

allow this to have circular borders on ie9

Posted on 2011-09-11
16
Medium Priority
?
284 Views
Last Modified: 2012-05-12
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
Comment
Question by:rgb192
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 2
  • +1
16 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 36520033
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
 

Author Comment

by:rgb192
ID: 36520180
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
 
LVL 16

Expert Comment

by:SSupreme
ID: 36520320
#product {
  behavior: url(http://yoursite.com/border-radius.htc);
}
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:rgb192
ID: 36520403
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
 

Author Comment

by:rgb192
ID: 36520419
i downloaded file
http://curved-corner.googlecode.com/files/border-radius.htc

I needed to put it in same folder as my file
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36520582
yes, you are right. Put it where your html file is.
0
 

Author Comment

by:rgb192
ID: 36520598
but it doesnt create circular borders in ie for me.

css file (the last file I have attached)
needs to be changed
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36520625
0
 

Author Comment

by:rgb192
ID: 36520703
I can not download because I am not rapidshare customer.  Could you upload
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 36521001
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
 
LVL 42

Expert Comment

by:David S.
ID: 36521945
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
 

Author Comment

by:rgb192
ID: 36522765
the code does not work for me

what changes have to be made to the code
0
 
LVL 42

Expert Comment

by:David S.
ID: 36523004
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
 

Author Comment

by:rgb192
ID: 36523118
>>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
 
LVL 16

Accepted Solution

by:
SSupreme earned 2000 total points
ID: 36525301
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
 

Author Closing Comment

by:rgb192
ID: 36525903
thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month10 days, 6 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question