Solved

make this css work with ie8 and below

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

"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…
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.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

762 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

24 Experts available now in Live!

Get 1:1 Help Now