Search This Blog

Mind freaker Stuff

Please Visit my new blog http://www.mindfreakerstuff.com for new articles related to web and mobile designing.
Showing posts with label CSS Hacks and Conditional comments. Show all posts
Showing posts with label CSS Hacks and Conditional comments. Show all posts

Wednesday, November 23, 2011

Clear float without extra tag with CSS


CSS for all browsers  --------------------------------------------


.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: " ";
}

.clearfix:after {
  clear: both;
}



CSS for IE 6, 7 ----------------------------------------------

 .clearfix {
    *zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
 }  

HTML (For IE 6,7)--------------------------------------------

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

Friday, June 17, 2011

IE 6 ,7 8 CSS hacks

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
 _color : orange; /* IE6 */
}


Conditional comments of IE

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
</p>

Taking your detection further

Operators is what CC relies on to determine it course of action. We saw above how one operator, "!", is used to negate the browser version to detect. In fact CC supports a handful of other operators, which we shall list and then explain:
Operators supported by CC
Operator syntax Description
! The "not" operator.
lt The "less than" operator.
lte The "less than or equal to" operator.
gt The "greater than" operator.
gte The "greater than or equal to" operator
With the above operators more generic detection of browsers such as IE6+ (which encompasses IE6, IE6.1, IE7, and so on) becomes possible. For example:
<!--[if gte IE 6]>
You are using IE 6+
<![endif]-->