browser specific css for internet explorer and Firefox only

Question

please help I need wright style for IE only is there any one who know it well also I want Firefox specific css, I am trying to show somthing like this

Answer 1

Place something similar to the following in the header.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

This will work for any browser that you choose it to, consider:

<!--[if lt IE 9]>
your css in here
<![endif]-->

This will display your specified rules if the browser is ie 8 or lower.

Answer 2

For any mozilla use:

@-moz-document url-prefix() 
{ 
  // Styles for mozilla goes here
}

For a specific IE use the following. Here it is IE 8

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

For IE 7 and lower versions

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

For IE 7 and higher versions

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

OR

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

If you want to use inline CSS for IE, then instead of linking to a CSS file, add styles in between the condtion.

<!--[if gte IE 7]>
        <style>
                  // Style for IE 7 and higher versions.
            </style>
<![endif]-->

Answer 3

For IE you can use :

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

For mozilla, you can use :

<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
    // all styles for mozilla alone
}
</style>