Apply CSS Class based on Browser

 

Do you need to modify couple of CSS class attributes depending on browser?  There are various ways to achieve it. But I found this very simple approach for working on this issue.

                There are modifications needed at 2 places in the code. One is in the HTML body / ASPX page and other is in CSS file. Suppose there is DIV in your mark up and you want to apply different CSS class attributes if browse is IE6 / IE7/ IE8. Then just add a container div with id IE7 to this div. It can be added as this on ASPX page (Note- you can add this in Master page / specific page if you are not using Master Pages): -

<!--[if IE 7]><div id="ie7"><![endif]-->

      <div class=”category”>

This is div of interest where ie7 specific rendering should be done.

      </div>

  <!--[if lte IE 7]></div><![endif]-->

                The second change is in CSS file. All classes which should be handled specifically by IE7 css should be defined as #ie7. <classname>. Following example would make thing clear.

.category {margin-left: -20px;}

 

#ie7 .category { margin-left: 20px;}

                Generally I prefer to add this code immediately after body so that I can manipulate all CSS classes from the page.

Technorati Tags: ,,

Popular posts from this blog

Weekend Gateway Trip - Shrivardhan

Cross Apply Incorrect syntax near '.'

FirstBlog