I created two websites www.skytradefx.com and www.harvestbullion.com . latter one looks somewhat fine in all browsers but former one not looking great. So i decided to make some changes for www.skytradefx.com in Internet explorer in which it looks bad.
I started searching for “how to do ie support” but don’t know how. Then after lot of searches, I finally found three things.
1) Conditional classes
2) Conditional comments
3) Css hacks
I took up the Conditional classes which is easy like
1) <!–[if lte IE 7]> <html class=”ie7″><![endif]–>
2) <!–[if IE 8]> <html class=”ie8″> <![endif]–>
3) <!–[if IE 9]> <html class=”ie9″> <![endif]–>
4) <!–[if !IE]><!–> <html> <!–<![endif]–>
Put these in between <head> tags and start styling in your main.css or style.css itself .No need to create a new css file for each browser versions.
Do styling like:
.ie7 .element {
margin:1px;
}
.ie8 .element {
margin:2px;
}
.ie9 .element {
margin:0px;
}
This conditional classes are the best way so far I researched because if u do 2) conditional comments ,you have to write properties in separate css file for each ie version so it will take extra Http request from server while client loads your website in browsers which will affect site performances.
Atlast if u do 3) css hacks , its fine for some period of time but not for the future period as technologies getting higher for HTML5.
Source : http://www.impressivewebs.com/ie7-ie8-css-hacks/
P.S – If u want to style only advanced CSS selectors like (first-child,last-child,first-line,first-letter,hover,focus,active) , you can use the js tool called selectivizr.js .
Other efficient tools are Modernizr.js ,Html5shiv.js . These tools comes handy and very useful.
For full details , Source – http://code.tutsplus.com/tutorials/html5-and-css3-without-guilt–net-16787
Thanks
Started my own website, visit at http://www.imarun.com
Your's problem was mine before 