CSS hacks for different browsers

Question

Can anyone please help me with this. I am new to css styling. I have a css file where all my styling resides for the asp.net website that I am trying to build. However it works fine on the server that has IE 7 installed on it and when I try to view it using chrome, firefox or IE 8 and above it kinda distorts the look of the website.

I need to change my margin according to the client browser. How do I achieve this? Ive heard that there is an "if" condition solution to this. Means I have to write seperate css files in my project and include the right one according to the browser?? Cant I just change the basic css to detect the browser and select the appropriate styles?

i want to choose different positioning for a division according to client browser. I am working on asp.net 2.0 by the way.

existing code:

#page   
{  
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
}  

I am trying to do this:

html>/**/body #page   
{  
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
}  

But the img1 does not load up for IE 8 and firefox. It does for IE 7.

I tried to target just IE 7 for my testing purposes with the following code in my html file:

<!--[if IE 7]> body {
background-color: Red;
} <![endif]-->

However when I test the page on IE 7 it just show me the "background-color: Red;" text. Why is that? Am i missing something here in this conditional statement? It is only taking the text and doing nothing with the background color. Thanks.

Answer 1

You can code for standards compliant browsers (Chrome, Safari, Firefox etc.) and then add conditional comments for internet explorer.

EDIT:

As a side point, look at Eric Myers' CSS reset. It's an excellent resource.

Answer 2

CSS Hacks are decreasing in popularity. You should instead start your css by using a CSS Reset. You can read more about reset options in this thread.

Answer 3

Conditional formatting for IE: http://www.quirksmode.org/css/condcom.html

In terms of Hacks you can write invalid markup for some browsers (such as IE) by using _ in front of the CSS attributes for IE 6/7 but it makes your CSS invalid per specifications - it will still run properly.

Answer 4

Instead of Conditional Comments and non-standards ompliant CSS hacks, check out the CSS Browser Selector plugin. This jQuery will allow you to write different rules for each browser inside the CSS file itself with no inaccuracies for standards and no Conditional comments. It can even allow you to target different browsers on different OS's.

For IE you'd write:

.ie .myDiv
{
   background-color: #f00;
}

And for webkit browsers:

.webkit .myDiv
{
   background-color: #bar;
}

Then IE (all versions) and Webkit browsers will display different background colors. You have a big choice of browsers to select as well :)