Creating Dynamic Style Sheets Using ASP - IE 6
(Page 3 of 3 )
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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |