Improve company productivity with a Business Account.Sign Up

x
?
Solved

make this css work with ie8 and below

Posted on 2011-09-30
5
Medium Priority
?
307 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 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
 
LVL 1

Author Closing Comment

by:rgb192
ID: 36974927
Thanks
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

595 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