Cfinput datefield gives wrong display in IE6 IE7

Question

With CF8, I try cfform=html with cfinput type=datefield. When
I use 2 input dates, and click on the calendar image, the opened
calendar window appears behind the second cfinput. You can check
the result here :
datefiled.pdf
The code is quite simple :
<cfform action = "cfinput.cfm">
<p> </p>
<cfinput type="datefield" name="MyDate1"
firstDayOfWeek="1">
<p> </p><p> </p>
<cfinput type="datefield" name="MyDate2"
firstDayOfWeek="1">
<p> </p>
<input type="Submit" name = "" value="Submit">
</cfform>
The display problem appears in IE6 and IE7, but not in
Firefox. Is this a bug, or any workaround is already know ?
Thanks.
Firmus.

Answer 1

<input type="Submit" name = "" value="Submit">
corrected to: <input type="Submit" name = "sbmt"
value="Submit">
> Is this a bug
Seems so. You should report it.
i suspect the likely cause to be the z-index value.
Z-index
is a CSS property. It determines one element's stack order in front
of or behind another. An element with a higher z-index will be
stacked in front of one with a lower value. The default value is 0,
for example, in the case where you don't specify the z-index.
To see the relevance to your case, open in Internet Explorer
a page containing just the form. View the source code. The
Coldfusion engine has automatically arranged the HTML within the
form into two main DIV blocks, each containing other DIVs. You will
notice that neither of the two main DIV blocks has z-index in its
style attribute. It means that they have the same z-index value,
namely, the default value 0.
The calender image at the top has the same z-index value as
the input field at the bottom, namely, the default value 0. One
would naturally expect that order of appearance would be the
deciding factor. Apparently, order of appearance is important in
Mozilla but not in Internet Explorer. It seems that, if two
elements have the same z-index, Internet Explorer may show the
second one in front of the first.
>... any workaround ...
Yes, here is one:
<cfform action = "cfinput.cfm">
<div class="df1" style="position:relative;">
<p> </p>
<cfinput type="datefield" name="MyDate1"
firstDayOfWeek="1">
</div>
<div class="df2" style="position:relative;z-index:-1;">
<p> </p><p> </p>
<cfinput type="datefield" name="MyDate2"
firstDayOfWeek="1">
</div>
<div class="sbmt">
<p> </p>
<cfinput type="Submit" name = "sbmt" value="Submit">
</div>
</cfform>