home > articles >

Using ColdFusion to solve your CSS problems   June 05, 2007

Using CSS in your web applications can give your user interface a professional look and feel. When you use div elements to create the structure of your web site, you can run into problems with Microsoft Internet Explorer and Firefox. By implementing a simple solution using ColdFusion tags, you can speed up your productivity and development time. This technique is worth looking at, and it may fit into your development process for your ColdFusion web project. Because browser issues exist between Firefox and Internet Explorer, you might consider the following approach: understand the fundamental differences between the two browsers, implementing two separate div based style sheets, and using ColdFusion CGI variables to discover the user agent.

First, you will benefit from understanding the fundamental differences between Firefox and Internet Explorer; that is, how they respond to div elements. If you have ever worked with div elements in Microsoft Internet Explorer and Firefox, you will notice a two-four pixels off set. This off set shifts either to the left or to the right. When you are floating columns left or right, and parallel to each other, you start to see this problem. This can be difficult to manage and consume a lot of your development time. By understanding these fundamental differences between these two browsers, you can begin to implement a solution to fix this problem.

Secondly, by implementing two different div based style sheets, you can fix the browser differences. Instead of trying to put all your Div CSS code into one file, and attempt to fix the bugs; build a div style sheet for each browser. That is, one for Internet Explorer and one for Firefox. If the layout looks correct in Firefox, it will look correct in Netscape. Using this technique, you can achieve an exact layout for each browser. You have learned the importance of creating two separate div based style sheets for each target browser.

Finally, you can use ColdFusion CGI variables to discover the user agent. Once you know the user agent, and you include the appropriate target style sheet, the browser inconsistency problem disappears. Because you will be running the ColdFusion server, this CGI variable will be available to you. This technique works excellent, and it is very precise. For example, look at code listing 1.1, and see the code snippet for this technique. You have learned the importance of using the ColdFusion server to target the correct style sheet, so you can solve the browser inconsistency issues.

In conclusion, dealing with CSS related browser related issues could be challenging. Therefore, you may be laying out your whole web applications using Divs, and this technique can make the process simple. When using the div tag to layout your design, the fundamental understanding of the browser differences is crucial. By using the above-mentioned approach; that is, know the browser differences, creating two separate Div style sheets, and find the user agent, you can solve the browser inconsistency issue.