CODEWITHSUNDEEP
cssinternet-explorer
kamaci
kamaci

Reputation: 75137

CSS Property Condition According to Browser

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?

Upvotes: 0

Views: 57

Answers (3)

jleggio
jleggio

Reputation: 1286

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+

Upvotes: 0

user3913686
user3913686

Reputation:

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>

Upvotes: 1

IVIajid
IVIajid

Reputation: 190

<!--[if IE]>
    <style>
        #element{top: 20px;}
    </style>
<![end if]-->

conditional comments that works for IE.

Upvotes: 0

Related Questions