CSS Property Condition According to Browser - css

Question

I have a CSS property:
top:20px;
It is Ok with Internet Explorer but not with FireFox. It should be that for Firefox:
top:0px;
How can I add that conditionally situation at CSS?

Answer 1

Found this piece of script here that could be of great use to you.
// This function returns Internet Explorer's major version number,
// or 0 for others. It works by finding the "MSIE " string and
// extracting the version number following the space, up to the decimal
// point, ignoring the minor version number
<SCRIPT LANGUAGE="JavaSCRIPT">
function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // If Internet Explorer, return version number
return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
else // If another browser, return 0
return 0
}
</SCRIPT>
As a note, css is for styling your sheet, and so you would need to add this css via javascript or other scripting language.
It is a little excessive for what you need, but stripping it down (so as to not get the version number). It forms quite a good basis for your test.
A Good Example
The following example demonstrates how to detect the browser version from a client-side script.
Note that this example does not specifically check for platform version, such as Windows 95, Windows >NT, Windows 3.1, and so forth, which require a separate userAgent substring check when applicable:
<SCRIPT LANGUAGE="javascript">
if ( msieversion() >= 4 )
document.write ( "This is Internet Explorer 4 or later" );
else if ( msieversion() >= 3 )
document.write ( "This is Internet Explorer 3" );
else
document.write ( "This is another browser" );
</SCRIPT>

Answer 2

You can add the following conditional statement into your CSS
#-moz-document url-prefix() {
.className {
top:0px;
}
}
Any CSS in-between #-moz-document url-prefix() will only be applied to Firefox.
But maybe a better choice would be to apply a conditional to IE instead. You could leave top:0px; in your current CSS and add the following conditional for IE in the head of your document.
<!--[if IE]>
<style>
.className {
top:20px;
}
</style>
<![endif]-->
Note: Conditional comments are not supported in IE10+

Answer 3

<!--[if IE]>
<style>
#element{top: 20px;}
</style>
<![end if]-->
conditional comments that works for IE.