It is important for me to note that in IE6 there will be one other piece of code that will affect how this style sheet is rendered. Because the padding change is such a radical one, Microsoft has decided that the new padding standard will only apply if you specify the use of one of the document type definitions (or DTDs) that comply with HTML 4.01. The default will be Frameset if you don't specify one, so using this code without providing either a Loose or Strict DTD will cause your boxes to appear oddly in IE6. To correct this, either remove IE6 from the css2compatible test in BrowserDetect.asp, or provide the following line of code at the top of your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
That's about it. Simply include a link to the stylesheet in the HTML file and you'll have a style sheet that will customize itself to the browser of any specific user of the site.
<link rel="stylesheet" type="text/css" href="samplestyle.asp" />
Wasn't that easy? You can view the sample output by following the link below. Check it out in diffferent browsers to see the different results you'll get in them. You could even view the stylesheet itself at its URL to see the actual code produced when your browser loads the file.
For once I seem to have written something that doesn't require a great deal
of elaboration. The concept is simple, and yet this concept has applications
which can become very complex. For example, you could pass specific attributes
to your style sheet using the Request.QueryString object, making it a one-stop
style shop for your entire web site, while still being able to produce customized
styles for various pages and parts of the site.
I should mention some of the benefits of doing things this way. Firstly, by
putting the ASP in your style sheet, you can avoid having obnoxious and cumbersome
code in your web application; normally you'd have to use CLASS or ID attribute
name changes to accomplish the same cross-browser results we get here. Also,
your style sheet will contain only the code that it needs at any one time, reducing
the risk that your style commands will conflict with one another and produce
unfavorable results.
Comments