SharePoint2k7: Custom List EditForm annoying field labels, how to remove?

Question

I experienced some 'strange' differences on SharePoint 2007 between my TST and PRD environment. I was working on customising a list's EditForm, and I noticed the new form I created on TST displayed correctly like this:

This is the style I wanted. However, when I performed exactly same operation on the PRD, this was what I got, note the extra form field labels and wrappers around the same two fields:

The source (of the generated html files) were different too:

    Correctly displayed:

<tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>Profit Centre<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody"><span dir="none">
        <input name="ctl00$m$g_193d5406_ba72_454b_b14c_87873ba714d6$ff5_1$ctl00$ctl00$TextField" type="text" value="ALL" maxlength="255" id="ctl00_m_g_193d5406_ba72_454b_b14c_87873ba714d6_ff5_1_ctl00_ctl00_TextField" title="Profit Centre" class="ms-long" /><br>
    </span></td></tr>
<tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>Status<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody"><span dir="none"><select name="ctl00$m$g_193d5406_ba72_454b_b14c_87873ba714d6$ff6_1$ctl00$DropDownChoice" id="ctl00_m_g_193d5406_ba72_454b_b14c_87873ba714d6_ff6_1_ctl00_DropDownChoice" title="Status" class="ms-RadioText">
                    <option selected="selected" value="Not Yet Reconciled">Not Yet Reconciled</option>
                    <option value="Reconciled">Reconciled</option>
                    <option value="Reviewed">Reviewed</option>
                    <option value="Rejected by Reviewer">Rejected by Reviewer</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected by Approver">Rejected by Approver</option>

                </select><br></span></td></tr>


===========================================================
Annoying wrapper displayed:

<tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>Profit Centre<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody">
<div align="left" class="ms-formfieldcontainer">
<div class="ms-formfieldlabelcontainer" nowrap="nowrap">
<span class="ms-formfieldlabel" nowrap="nowrap">Profit Centre</span></div>
<div class="ms-formfieldvaluecontainer">
<span dir="none">
        <input name="ctl00$m$g_7716bb24_9fc9_4e72_a2c6_bec888418014$ff6_1$ctl00$ctl00$TextField" type="text" value="ALL" maxlength="255" id="ctl00_m_g_7716bb24_9fc9_4e72_a2c6_bec888418014_ff6_1_ctl00_ctl00_TextField" title="Profit Centre" class="ms-long" /><br>
    </span></div></div></td></tr>
<tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>Status<span class="ms-formvalidation"> *</span></nobr></H3></td>
<td width="400px" valign="top" class="ms-formbody">
<div align="left" class="ms-formfieldcontainer">
<div class="ms-formfieldlabelcontainer" nowrap="nowrap">
<span class="ms-formfieldlabel" nowrap="nowrap">Status</span></div><div class="ms-formfieldvaluecontainer">
<span dir="none">
<select name="ctl00$m$g_7716bb24_9fc9_4e72_a2c6_bec888418014$ff7_1$ctl00$DropDownChoice" id="ctl00_m_g_7716bb24_9fc9_4e72_a2c6_bec888418014_ff7_1_ctl00_DropDownChoice" title="Status" class="ms-RadioText">
                    <option value="Not Yet Reconciled">Not Yet Reconciled</option>
                    <option selected="selected" value="Reconciled">Reconciled</option>
                    <option value="Reviewed">Reviewed</option>
                    <option value="Rejected by Reviewer">Rejected by Reviewer</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected by Approver">Rejected by Approver</option>
                </select><br></span></div></div></td></tr>

How do I remove the extra field containers and related field labels? Why did it behave differently on these two SP2007 environments?

Your tips and answers are much appreciated. Thanks in advance.

Answer 1

It turns out the two environment were of different flavours. The TST environment was running SharePoint Content Management Server with Microsoft.SharePoint.dll version = 12.0.6421.1000. While as the PRD environment was an Enterprise edtion with Microsoft.SharePoint.dll version = 12.0.6565.5001.

And thanks Mirjam for this excellent solution: http://social.msdn.microsoft.com/Forums/en-CA/sharepointcustomization/thread/f00d37d3-2254-44fa-8f4d-ae7683c645cf

The workaround is to inject a piece of CSS style sheet to override these two OOB classes:

<style type="text/css">
.ms-formfieldlabelcontainer {
    display: none;
}
.ms-formfieldvaluecontainer {
    border: 0px;
    border-style:hidden;
    padding:0px;
    margin:0px;
}
</style>

And everything looks great now!