Conditional CSS – For Internet Explorer – 5 Easy Methods

CSS, or the Cascaded Style Sheets provide the layout, the looks and proper hold on the web pages and make it beautiful, or even cool, or even Professional. Web Designers face a lot of challenges, or simply they have to make a mess while coding the CSSĀ  specially for Internet Explorer because, they read the CSS extremely different than other browsers do. So, For a website, to look perfect in Internet Explorer and Firefox, we have to code it for firefox and add conditional CSS for the visitors using Internet explorer.

Here are the 5 methods to Declare condition CSS for the Internet explorer Visitors :

1.Adding the styles seperately for IE only.

<!--[if IE 6]>
<style type="text/css">
.className border:1px solid #999;
</style>
<![endif]-->

2. A complete and Seperate CSS file for Internet Explorer.

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

3. Special DIV For Internet Explorer - Or Internet Explorer Only DIV

#divName padding:10px 0 !important; padding:0 /*IE only*/

4. Making an IE Wrapper and Adding All Contents into it.

<body>
<!-- START IE6 open tag declaration-->
<!--[if IE 6]><div id="ie6"><![endif]-->
<!-- END IE6 open tag declaration-->

<div id="content"
<p>AllCodes Will Come Here. and will be under ie6 div .</p>
</div>

<!-- START IE6 end tag declaration-->
<!--[if IE 6]><![endif]-->
<!-- END IE6 end tag declaration-->
</body>

This Code Makes it code Only the above things and nothing else. As you can See the tag is declared to be ended, it no more grabs any bit or byte again. So all the HTML codes should come under the content Div or the one we make.
5. Style Line with Conditional Execution

#content p width:920px; padding:10px 15px 3px
#ie6 #content p width:920px; padding:10px 3px

Here, Content Will be loaded with the first line measures for all browsers except IE6. When the site is accessed from IE6, Second line gets executed.

5 Responses to “Conditional CSS – For Internet Explorer – 5 Easy Methods”

  1. The solution to the HTML CSS for internet explorer is very helpful and beneficial.

  2. I think you mss ">" in line

    <div id="content"

    By the way, this post is very helpful for web-browser compatibility. Thank you very much

  3. Vodafine July 9, 2013

    Awesome stuff

  4. this is very informative. But what about bootstrap.have bootstrap solve cross browser issues.

  5. Raviteja April 17, 2016

    It is very useful stuff for browser compatibility issues, thank you.

Leave a Reply