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.