Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

make this css work with ie8 and below

Posted on 2011-09-30
5
Medium Priority
?
302 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
[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
5 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 1000 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 500 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 500 total points
ID: 36899648
Look into using Modernizr http://www.modernizr.com/
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 1000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

604 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