Wednesday, December 18, 2013

How to write IE Only styles ?

It’s a hack!

As with all CSS hacks this technique works by exploiting errors in a browsers style sheet parser. We’ll be using a combination of strategically placed \0, \, and \9 character escapes which IE will happily accept as valid syntax causing it to parse the @media block and apply any style rules defined inside it. Other browsers correctly identify the syntax error and discard the @media block along with its contents.

The @media rule hacks

To target IE 6 and 7

@media screen\9 {
    body { background: red; }
} 

To target IE 6, 7 and 8

@media \0screen\,screen\9 {
    body { background: green; }
} 

To target IE 8

@media \0screen {
    body { background: blue; }
} 

To target IE 8, 9 and 10

@media screen\0 {
    body { background: orange; }
} 

To target IE 9 and 10

@media screen and (min-width:0\0) {
    body { background: yellow; }
} 

Using the hack

This says it all really:
body {
  background: pink;
}

/* IE 6 and 7 fallback styles */
@media all\9 {
    body {
        background: red;
    }
    h1 {
        color: yellow;
    }
}

/* IE 6 and 7 fallback print styles */
@media print\9 {
    body {
        color: blue;
    }
    h1 {
        color: red;
    }
}
 
Note that the @media type can be any of the supported types, so rules in @media screen\9 will target screens and @media print\9 will only apply to print style sheets.

nth-child selector for ie8 ( jQuery)

1)add jquery latest version in your code

2)add this snippet, replace tr with your required element
<script type="text/javascript">
$( document ).ready(function() {
$('tr:nth-child(odd)').addClass('oddTr');
$('tr:nth-child(even)').addClass('evenTr');
});
</script>
 
3) create class in css 
 
 

Wednesday, December 4, 2013

Current page highlighting for Navbar menu - CODE

 
CSS 
 
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
 color: #fff;
 background: #930;
}