Solved

allow this to have circular borders on ie9

Posted on 2011-09-11
16
278 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

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

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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 54
Error in page 3 46
Getting Column Height to Match Other Column 5 44
Crazy text will not be removed no matter what I try! 13 15
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

867 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now