ansaurus

Question

CONDITION CSS differentiate between IE6 to IE7

Answer 1

+2 A:

You can't use conditional comments in CSS. Only in HTML. So you'd have to put the declarations for the different browsers into different files and conditional-comment several <link>s to them.

So more something along the lines of

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

Joey 2009-07-12 10:42:01

Answer 2

A:

You need to do it a bit different way. Use comments and enclose links to browser specific CSS files. This way it should work:

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

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

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

You can also use <style> tags instead of links, but this is a bad way of doing this.

freiksenet 2009-07-12 10:45:38

Answer 3

+2 A:

Your !IE is incorrectly commented, and you are missing style tags. If this is exactly how it exists in your HTML then that is your problem. If this is in a CSS file then you cannot use conditional comments in that location.

Corrected:

<!--[if !IE]>-->
<style type="text/css" media="screen">
    #mainDiv {text-align:-moz-center;}
    #skyBanner {top:0px;left:0px; position:fixed;visibility:hidden;}
</style>
<!--<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
    body > #skyBanner {  position: fixed;}
    #skyBanner {position:absolute;visibility:hidden;
    left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px');
    top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
    #skyBanner {position:fixed;visibility:hidden;}
</style>
<![endif]-->

Again, as it is currently written, NO browser is seeing the !IE code.

I'm also not sure you've written the other conditionals correctly. You have "body > #skyBanner {position: fixed;}" under the "if lt IE 7" conditional, yet IE6 and lower do not support this CSS selector to my knowledge.

So any number of the issues I've described could be leading to your problems with IE6 and IE7.

jonwd7 2009-07-12 10:57:39

ansaurus

tags:

views:

answers:

CONDITION CSS differentiate between IE6 to IE7

related questions