Grab this articles

<h1>CSS Browser Detection - The complete guide</h1><p> <br /><br /> Different browsers, different CSS interpretations! There will<br /><br /> be a time when you'll need to hide some CSS rules from a<br /><br /> particular browser, or even all the CSS file! In this articles<br /><br /> I'll try to compile all possible types of Browser detection<br /><br /> technics and provide examples. So let's start with the easier<br /><br /> one!<br /><br /> <br /><br /> Browser detection for Netscape<br /><br /> <br /><br /> Netscape 4 is probably the dumbest browser when it comes to CSS<br /><br /> support, extremely limited and many times erroneous! As the<br /><br /> browser's market share of Netscape is below 0.5% it became<br /><br /> natural to hide the CSS file from it! The method used for this<br /><br /> is the import directive that will make the browser to display a<br /><br /> version of the site completely without CSS. <br /><br /> <br /><br /> Here's the directive you have to call: (style<br /><br /> type="text/css")@import url(wise-designscom.css);(/style)<br /><br /> <br /><br /> Browser Detection for IE Mac computers<br /><br /> <br /><br /> This browser "died" when Microsoft announced there would be no<br /><br /> more updated versions of it. Now this browser fell in desuse and<br /><br /> there are a wide range of CSS technics that IE/Mac doesn't<br /><br /> interpret well! Therefore many webmasters started to code their<br /><br /> CSS sites so that they would work correctly on this browsers.<br /><br /> Contrary to Netscape users, these weren't neglected.<br /><br /> <br /><br /> The hide technic:<br /><br /> <br /><br /> /* Hide from IE-Mac */ #header {padding-bottom:3em} #footer<br /><br /> {padding-top:1.5em} /* End hide */<br /><br /> <br /><br /> IE/Mac won't see these commands but will display the content<br /><br /> even without those rules! Now... if you have a specific area of<br /><br /> your site that isn't vital to your visitors you can just hide it<br /><br /> completely from this browser without having the trouble to even<br /><br /> try and make it look better within the possible! Here's how:<br /><br /> <br /><br /> #noiemac {display: none} <br /><br /> <br /><br /> /* Hide from IE-Mac */ #noiemac {display: block} /* End hide */<br /><br /> <br /><br /> The first rule hides it all from IE/Mac (e.g <div<br /><br /> id="noiemac">content to hide here!</div>)<br /><br /> <br /><br /> The second CSS ruledisplays the section cause Ie/Mac can't see<br /><br /> it!<br /><br /> <br /><br /> Browser Detection for Internet Explorer<br /><br /> <br /><br /> For this one we'll have to use the "child selector". This rule<br /><br /> consists of two elements, the parent and his child! Let it be<br /><br /> html>body, body being the child of html the parent! As IE don't<br /><br /> understand it, it will come a time when this knowledge will come<br /><br /> to be handy!<br /><br /> <br /><br /> The typical example of the header margin:<br /><br /> <br /><br /> #header {margin-bottom:4em} html>body #header {margin-bottom:1em}<br /><br /> <br /><br /> IE will use the 1st rule cause it's blind to the 2nd and all<br /><br /> other browsers will use the 2nd one!<br /><br /> <br /><br /> Browser Detection for Internet Explorer 5<br /><br /> <br /><br /> At first this one was strange to me! How the hell we have to set<br /><br /> different rules for different VERSIONS of the same browser?<br /><br /> Well, the truth is that IE5 doesn't get right the box model!<br /><br /> When we specify the width of an element in CSS, that doesn't<br /><br /> include the values of padding and borders. IE5 include these<br /><br /> values in the width, which leads to widths become smaller in it!<br /><br /> <br /><br /> Let's see the following example:<br /><br /> <br /><br /> #header {padding: 2em; border: 1em; width: 12em}<br /><br /> <br /><br /> For all browsers this width would be 12em! For IEe the width<br /><br /> would be 6em!! God! How is that possible? Simple: 12em (Width) -<br /><br /> 4 (padding left + padding right) - 2 (border left + border<br /><br /> right)! <br /><br /> <br /><br /> Is there any solution for this problem? Sure! A clever guy,<br /><br /> named Tantek Çelik (you'll hear of him a lot if you read many<br /><br /> tutorials of CSS! This is kind of the most important discovery<br /><br /> since the wheel on CSS community!) invented the box model hack<br /><br /> <br /><br /> He said that to make browser detection work , and send a<br /><br /> different CSS rule to IE5 you would use the following:<br /><br /> <br /><br /> #header {padding: 3em; border: 1em; width: 18em; voice-family:<br /><br /> ""}""; voice-family:inherit; width: 12em}<br /><br /> <br /><br /> IE5 will use the first width value of 18em! 6em of which will be<br /><br /> taken up by the padding-left + padding-right + border-left +<br /><br /> border-right. This would ultimately give the element a width of<br /><br /> 12em in IE5.<br /><br /> <br /><br /> The 18em value will then be overridden by the second width value<br /><br /> of 12em by all browsers except IE5, which, for some reason,<br /><br /> can't understand the CSS command that comes immediately after<br /><br /> all those squiggles. It doesn't look pretty, but it does work!<br /><br /> <br /><br /> I hope this articled helped you understand the different<br /><br /> situations related to browser detection in the CSS world! At<br /><br /> first it was confusing to me but with 2/3 hours of reading<br /><br /> anyone would be able to understand this ... and understand well!<br /><br /> For more quality articles and tutorials please visit my site at<br /><br /> <a href="http://www.wise-designs.com" target="bago">http://www.wise-designs.com</a> ! I'll be expecting you there!!<br /><br /> More <a href="http://www.articlesroom.com">free articles</a> from <a href="http://www.articlesroom.com">http://www.articlesroom.com</a>