Home > Tutorials > css > Css For Different Versions Of Ie

Css For Different Versions Of Ie

CSS for different versions of IE

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;
            span-weight:bold;
    }
        </style>

    <![endif]-->    

    <!--[if lte IE 7]>

        <style type="text/css" media="all">

            #box {
            padding-top:50px; 
            text-align:center;
            color:#FFFFFF;
            span-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;
            span-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 whats 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.

Posted on Tuesday, April 29th, 2008 viewed 119 times, 0 Comments

Comments

No comments yet