title: CSS hacks for different browsers
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>i want to choose different  positioning for a division according to client browser. I am working on asp.net 2.0 by the way. </p>
  
  <p>existing code:  </p>
  
  <pre><code>#page   
  {  
  background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
  }  
  </code></pre>
  
  <p>I am trying to do this:</p>
  
  <pre><code>html&gt;/**/body #page   
  {  
  background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');  
  }  
  </code></pre>
  
  <p>But the img1 does not load up for IE 8 and firefox. It does for IE 7.</p>
  
  <p>I tried to target just IE 7 for my testing purposes with the following code in my html file:</p>
  
  <p><code>&lt;!--[if IE 7]</code>>
          body {<br>
                  background-color: Red;<br>
               }
  <code>&lt;![endif]--</code>></p>
  
  <p>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.</p>