Wednesday, January 12, 2005

CFLOGIN and CSS gotcha

This one had me looking for quite a while. I had done a quick and dirty setup of the cflogin process on an application. In order to log out my users, I put the bit of code below after my cflogin tag.

The idea was that I would use CSS-Positioning to place the little logout form on the screen when the user was logged in.

<cfif GetAuthUser() NEQ "">
<div id="logoutForm">
<form action="/appRoot/index.cfm" method="Post">
<input type="submit" Name="Logout" value="Logout" class="button">

Here's what I forgot:

NEVER produce output inside your Appication.cfm or OnRequestEnd.cfm files.

It will trip you up more often than not. Some people seem to get away with it, but I always seem to have trouble when I do this.

In the rest of the site, I used css positioning to place all sorts of things. Most of it worked fine, but every so often, I'd get a difference between IE and FireFox that didn't make senes.

What was happening: Becase I rendered my logout form in Application.cfm, it was appearing in the browser before the !DOCTYPE declaration. Since a doctype that isn't read as the first thing on the first line of a page is ignored, the browser gets thrown into quirks mode. Next thing you know, you've got a css mess on your hands.

To get around this problem, I simply replaced the output in Application.cfm with a variable that can be checked elsewhere in the application. I still use the base stylesheet to position the form as before. The code that checks wether the form should be displayed is now inside a file I include on each page that has some other boilerplate information.

Hmmm... maybe I better review the docs on CFSILENT.

1 comment:

  1. I often grab our customer's site content for them so our web application can mimic their site look. Occasionally I come across a perfectly designed site that when placed in our application goes all to hell because the mode changes (the web app is crap, needs overhaul). I just gave up on fixing them. Though from my recolection they were just demos or plans changed so it wasn't a big deal. I may have been able to work out the kinks but it would have been a lot of trial and error.