Solved

allow this to have circular borders on ie9

Posted on 2011-09-11
16
279 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 47
Error on link 14 48
Materializecss - Different Behaviors in Browser's 1 37
Bootstrap show icon when mobile text when computer or tablet 3 41
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

810 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