Solved

make this css work with ie8 and below

Posted on 2011-09-30
5
292 Views
Last Modified: 2012-05-12


this code works in ie9 and above and non ie browsers

add
border-radius.htc  to the css

to make curved borders work with ie8, ie7

the related questions gave me answers of tutorials but is there a way to edit this code to get a result similar to the attached picture


 inner picture
 want a border like this



<style>
#product {
    border: 1px solid #CCCCCC;
    border-radius: 10px 10px 10px 10px;
    float: left;
    height: 190px;
    margin-right: 20px;
    width: 140px;
}
#product:hover {
    border-color: #333333;
}
#product .title {
    color: #7D8587;
    font-family: Verdana;
    font-size: 11px;
    padding: 9px;
    text-align: left;
}
#product img {
    height: 105px;
    margin: 0 15%;
    width: 105px;
}
#product .price {
    color: #4AA4BF;
    font-family: Verdana;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    text-align: center;
}
</style>


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

Open in new window

0
Comment
Question by:rgb192
5 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 250 total points
ID: 36895228
I think you don't know what that border-radius.htc file does.
Inside of this file script which takes variable already existed in CSS, for example: -moz-border-radius:30px 50px 50px 50px; ,  script take first 30px and applies it to element.
So if you achieved result you wanted in FF (for example), it willbe the same in IE7 and IE8, but with all same corner.
There is a possibility to write code for each corner, but it could cost some money.
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 125 total points
ID: 36895600
You need Javascript to do it for you.
Use JQuery corner script.
Check this
0
 
LVL 6

Assisted Solution

by:thebradnetwork
thebradnetwork earned 125 total points
ID: 36899648
Look into using Modernizr http://www.modernizr.com/
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 250 total points
ID: 36900604
All suggestions here is what you already did. Your border build with script and Modernizr suggest what you are already using.
0
 

Author Closing Comment

by:rgb192
ID: 36974927
Thanks
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 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