how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

Question

how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

just in internet explorer the contentplaceholder move to another place today, past days no problem

<div id="content" style="margin-top:28px; margin-left: 240px; border:0px solid;">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>


<!--[if IE]>
#hellocss
{
    margin-top:-600px; margin-left: 100px; border:0px solid;
}
<![endif]-->

<!--[if !IE]>
#hellocss
{
    margin-top:28px; margin-left: 240px; border:0px solid;
}
<![endif]-->

i meet a big problem, it can be negative number for margin-top in internet explorer

Answer 1

You can use Conditional Comments in CSS like this

<!--[if IE]>
<link href="Styles/IEstylesheet.css" rel="stylesheet" type="text/css" />
<![endif]-->

Answer 2

Give the ContentPlaceHolder a class:

<asp:ContentPlaceHolder CssClass="contentPlaceHolderClass" id="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

and at the top of the page use conditional CSS to define this style: http://www.quirksmode.org/css/condcom.html

Answer 3

I think you can use underscore(_) in starting of your property name so that it will be only applicable to IE.

like style="style="margin-top:28px; margin-left: 240px; border:0px solid; _margin-top:10px; _margin-left: 240px; _border:0px solid; ">