Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

CSS for different versions of IE

David Carr

HTML CSS Tutorials

    Some times your site looks different in IE 6 then it does in 7 or in Firefox. Most of the time you can combat this with better coding but there's times when that just not enough.

    in them situations you can use condition statements for IE6 & IE7 in these conditions you would ran an alternate version of your CSS code an example of this:

    <!--[if lte IE 6]>
    <style type="text/css" media="all">
    #box {
      padding-top:50px;
      text-align:center;
      color:#FFFFFF;
      font-weight:bold;
    }
    </style>
    <![endif]-->
    
    <!--[if lte IE 7]>
    <style type="text/css" media="all">
    #box {
      padding-top:50px;
      text-align:center;
      color:#FFFFFF;
      font-weight:bold;
    </style>
    <![endif]-->

    This would be placed in between the head tags

    if lte IE 6 means if the browser is IE 6 then run the following code and the same applies to if lte IE 7

    you can either put some simple style changes in the if statement like this

    <style type="text/css" media="all">
    #box {
      padding-top:50px;
      text-align:center;
      color:#FFFFFF;
      font-weight:bold;
    </style>

    or import another stylesheet which is a better approach as your source code looks cleaner. Like this :

    <style type="text/css">
    <!--
    @import url("style/ie6.css");
    -->
    </style>

    any CSS style called inside the if statements take precedence over the main stylesheet and take effect instead of what's in the main stylesheet for that element.

    Hopefully this will help you get around some of the problems you have with different versions of IE.

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.