Wednesday, April 29, 2009

CSS Simple Trick of browser Compatibilty


I just recently found this out and it’s pretty cool so I have to share. When dealing with browser compatibility of CSS I used to have an IF statement in the HTML that would call for the appropriate CSS file according to the browser that is displaying the page. Well, I found a trick on how to keep all the class or id attributes together so it’s easy to find and adjust later.

The trick is you can use the pound sign (#) and underscore character (_) to comment out attributes for IE7, IE6 and FireFox.

The FireFox sees # and _ to be comment characters, Internet Explorer 6 sees # as comment character, Internet Explorer 7 sees _ as a comment. So if you build your CSS statement like the folowing example you should be able to please all 3 browsers. And this is great when dealing with paddings and margins, since Firefox and IE do not agree on these two.
------------------------------------------------------------------------------------------
Example:

#divid {

padding: 0px 0 20px 40px; /* All browsers see this */
#padding:0px; /* FireFox will not see this but IE7 & IE6 will */
#margin: 20px 0 0 40px; /* FireFox will not see this but IE7 & IE6 will */
_margin: 10px 0 0 30px; /* FireFox and IE7 will not see this but IE6 will */

}
------------------------------------------------------------------------------------------
I have not tested it in other browsers like Opera and Safari but it does work really good FireFox and IE’s. Let us know if this works for you or not.

0 comments:

Post a Comment

 

Webdoor. Copyright 2009 All Rights Reserved Revolution Two Church theme by Brian Gardner Blog Skins