web development tutorials

CSS difference Between IE6,IE7,IE8

As a designer we experience the most bizzare conditions with internet explerer because it doesn’t follow w3 standereds mostly while rendering elemets and Box Model where moslty other Gecko browsers follow same.Even i am very good at programming ,i experience difficult to find IE issues,wasted more time on CSS issues than programming.So i came up with reference for IE and instructions how to handle them to keep in mind reference for me (us).Even there is difference between IE versions also.So below is the reference

body>p,ul>li

	.class1 .class2 .class3,
	or like class=" class1 class2 class3"

a[href=xyx],input[type=radio]

h1+p,li+ul,ul+li

h1~p,li~ul,ul~li

a:hover span ,li:first p

a:first-child:hover ,  a:active:hover

p:hover

div li:first-child

a:focus

.class:before,.class:after

#box {  max-height: 500px;  min-width: 300px;  }

#box {  	border: solid 1px transparent;  }

#box {  	position: fixed;  }

#box {  	display: inherit;  }

table td {  	border-spacing: 3px;  }

table {  	caption-side: bottom;  }

#box {  	rect(20px, 300px, 200px, 100px)  }

	p { 	white-space: pre-line;  }
	div { 	white-space: pre-wrap;  }

@import url("styles.css";) screen;

	q {quotes: "'" "'"; }
	q:before {content: open-quote;}
	q:after {content: close-quote; }

ul {margin-left:0 !important}

Handling Issues

In the most cases IE6 doesn’t support all selector types to other IE7,IE8.

Even though IE7,IE8 both support much same selectors,they have difference in box model and rendering elements.

In the case of IE7 it just need to add special IE7 css fix style like below

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
		<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

in the case IE6,we can’t handle totally with seperate CSS file fix like above example,it needs some layout tweaks also.

We can show elements with conditions as below specified.

<![if!IE]>
This shows up in anything but IE
<![endif]>

It is better to avoid special characters in selecter name like "_","-",even they support mostly browsers.

Hadling CSS fixes with special selectors

Only IE6 and below
* html {}

IE7 and below

*:first-child+html {} * html {}

IE7 only

*:first-child+html {}

IE7 and Modern Browsers only
html>body {}

Recent Opera versions 9 and below

html:first-child {}