Solved

make this css work with ie8 and below

Posted on 2011-09-30
5
289 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

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

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

863 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

20 Experts available now in Live!

Get 1:1 Help Now