A while back I blogged about a div layer positioning glitch that occurs in IE when you position a cfinput datefield above a cflayout or cfdiv generated div layer. This problem seems to be cause by the fact that in IE, a relative positioned element influences the stacking order of it's child-elements, which violates the CSS specification, but who really needs standards anyways right?

Well, I figured out a way to workaround it, and it's really stupid that I didn't think of it before. I kept trying (unsuccessfully) to write a JavaScript function that would find the layers and reposition them after the page loaded, when finally a light bulb went on in my head, and I came up with a much simpler solution.

I simply used div layers so that the date field (which gets displayed at the top of the page) gets loaded by the browser after the cflayout stuff (which appears at the bottom of the page). Now as far as IE is concerned the calendar div layer now is at the top of the stack because it came last in the HTML source. Then I use CSS to position the sections of content where I want them to appear on the page.

First here is the code that generates the bug (click here in IE to see the bug I am talking about):

<cfparam name="StartDate" default="#dateformat(now(),'mm/dd/yyyy')#">
<cfform>
<cfinput name="StartDate" value="#StartDate#" type="DateField" onkeypress="loadDate(event);">
</cfform>
<br><br>
<cflayout type="tab" name="MyLayout">
<cflayoutarea name="Tab1" title="My First Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MyFirstDivLayer">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab2" title="My Second Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MySecondDivLayer">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab3" title="My Third Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MyThirdDivLayer">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
</cflayout>

Now here is the code with the workaround to solve the layer positioning issue (Click here in IE to see it with my workaround in place):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>DateField and CFDiv Bug Workaround</title>
   <style>
      .topDiv{position:absolute;
            top: 10px;}
      .bottomDiv{position:absolute;
            top: 30px;}
   </style>
</head>

<body>
<div class="bottomDiv">
<cflayout type="tab" name="MyLayout">
<cflayoutarea name="Tab1" title="My First Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MyFirstDivLayer" style="z-index: -1000;">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab2" title="My Second Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MySecondDivLayer" style="z-index: -1000;">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab3" title="My Third Tab" style="height:100%">
<br><br>
   <table width="95%" align="center"><tr><td>
   <cfdiv id="MyThirdDivLayer" style="z-index: -1000;">
   Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
   </cfdiv>
   </td></tr></table>
</cflayoutarea>
</cflayout>
</div>
<div class="topDiv">
<cfparam name="StartDate" default="#dateformat(now(),'mm/dd/yyyy')#">
<cfform>
<cfinput name="StartDate" value="#StartDate#" type="DateField" onkeypress="loadDate(event);">
</cfform>
</div>
</body>
</html>

I'm not sure if that solution will work for everyone, but it worked in my application and my IE users are happy now.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Aaron Longnion's Gravatar Nice Scott! heh, I needed this exact workaround about 2 months ago ;) ...so, we had to redesign the form to make sure the calendar div thing couldn't possibly overlay another part of the form improperly. I'll stick this in my bag o tricks for next time. Thanks!

btw - can you update your blog software to allow plus signs in email addresses (which is valid) - I'd like to enter something like myemailhandle+blogentry@gmail.com
# Posted By Aaron Longnion | 6/26/08 12:24 PM
Henry's Gravatar I wonder if this 'bug' will ever be fixed in CF8.02...
# Posted By Henry | 7/7/08 5:04 PM
Scott Bennett's Gravatar @Henry,

The problem is that this bug is really with IE more than with CF. The CF code is generating the calendar div layer with a z-index of over 9000 which, according to the World Wide Web Consortium CSS guidelines, should cause it to appear above any of the other div layers on the page (provided there are less then 9000 other layers on the page). Most likely Adobe engineers will have to take a similar approach as the one I used and have the calendar div layer always get generated at the bottom of the HTML source code and generate CSS to position it so that it appears to the right of it's related input field. I am not sure how easy that would be for Adobe to implement, or how big a priority it is, but I do know they are aware of the issue and that it is on the list of things that will get fixed someday.
# Posted By Scott Bennett | 7/8/08 1:50 PM
Shifty's Gravatar This is exactly what I was looking for. I would've never thought of absolute div positioning. Keep fighting the good fight of working around IE's faults! If only all browsers could be as easy to code for as Firefox.
# Posted By Shifty | 8/19/08 2:19 PM
modsyn's Gravatar Another simpler solution that doesn't deal with absolute positioning is to wrap the datefield in a div and give it the following style attributes:

<div style="clear:both;position:relative;z-index:2;">
<cfinput type="datefield" name="cal"/>
</div>
# Posted By modsyn | 11/14/08 3:20 PM
Sven Hiltner's Gravatar brilliant modsyn, it simly works with fewest effort
# Posted By Sven Hiltner | 2/18/09 9:51 AM
David's Gravatar Hi Scott,

I am having a problem with the CF datepicker in FF V 3.5.1.

http://www.neale.ca/test.cfm

The datepicker will popup in IE but nothing happens when you click the date icon in FF?

Any ideas?
# Posted By David | 7/31/09 8:30 PM
David's Gravatar Scott this has been fixed. The cfform tag must reside outside table tags for FF to work.
# Posted By David | 7/31/09 9:44 PM
 
Home | Blog | Portfolio | Contact | © 2001 - 2007 The ColdFusion Guy - Scott Bennett. All rights reserved.
BlogCFC was created by Raymond Camden. This blog is running version 5.9.