Solved

allow this to have circular borders on ie9

Posted on 2011-09-11
16
283 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
Independent Software Vendors: 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!

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

724 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