SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Sunday, February 12, 2012

nth-child selector for IE 7 browsers

I have been developing a static template for T.Works and need to validate for IE7 & firefox browsers.As per the requirement, i have been implementing the navigation via image sprite.

For the navigation, i need to fix the width of the third li to be 150px, which will be greater than other li.In the CSS, i have used the nth-child() pseudo selector.It works fine for firefox browsers, but the pseudo element selector was not supported by IE 7 browsers.Then i tried with appending the nth li with other li and it works fine for IE7 browsers.

/* standard nth */
 ul#nav li:nth-child(3) {
 width: 151px !important;
}
Works in Firefox not in IE 7.
/* IE nth */
ul#nav >li + li + li
{
    width: 151px !important;
}
Works in Firefox & IE 7.

Note:This fix has been tested and implemented in IE 7 browsers.