Friday, June 26, 2009

W3C Validated CSS with IE Hacks

Whenever there is a problem in validation because of IE hacks. Now here is the way to overcome the error to pass the validation.

The general fix for IE 6 is "_ " followed by a property and value

Example (_margin: 5px; )

For IE 7 "*" followed by a property and value

Example (*margin: 5px ; )

But this will not get passed in W3C validation service.

Instead of setting property like this

h2 {*margin: 10px ;}

For IE 6 and below

* html h2 {margin: 10px ;}

IE 7 and below

*:first-child+html h2 {margin: 10px ;}

* html {margin: 10px ;}

IE 7 only

*:first-child+html h2 {margin: 10px ;}

Let assume a CSS like this. If


p

{ padding: 5px; }

*:first-child+html p

{ padding:10px; }

* html p { padding:10px; }

Try the above CSS and check.

IE7 and IE6 paragraph padding will be 10px and all other browsers except IE Paragraph padding will be 5px;

Hey developers, now cross browsers issues can be solved with a proper standard W3C validation...

This will help out to style your website with proper web standards... Happy Styling :)

No comments: