Quirks Mode vs Strict - Dilemma

[Einstein47]

My dilemma is that I have a page on my site where the developer decided to use the Strict XHTML DOCTYPE. In IE6 that wasn't a problem, but now that we are moving to support IE7 - the page doesn't function well at all. Here is a snip of the HTML:

<div style="height: 70%;">
<form name="incidentsAssociatedToHearingForm" method="post" action="/calendar/schedulingManagement/incidentsAssociatedToHearing.do">
<table border="0" width="100%">
<thead>
<tr class="calTableHead" style="position:relative;top:expression(this.offsetParent.scrollTop-2);">
<th>Inc#</th>
<th>Offense Date</th>
<th>Short Description</th>
<th>Intake Decision</th>
<th>Intake Decision Date</th>
<th align="left">Intake Date</th>
<th>Hearing Type</th>
<th align="left">File Date</th>
<th>Remove</th>
</tr>
</thead>

<tbody>
<td> 2 <input type="hidden" name="item[0].incidentHearingId" value="5">
</td>

<td> 10-15-2008 <input type="hidden" name="item[0].offenseDate" value="10-15-2008">
</td>

<td>
AGG. ASSAULT WITH WEAPON/FORCE
<input type="hidden" name="item[0].shortDescription" value="AGG. ASSAULT WITH WEAPON/FORCE">
</td>

<td>
<select name="item[0].intakeDecision"><option value=""></option>
<option value="ADC">Adult Drug Court</option>
<option value="AWE">Adult Warrant Executed</option>
<option value="VAW">Adult Warrant Vacated</option>
<option value="CAD">Case Accepted Another District</option>
<option value="CW ONLY">Child Welfare</option>
<option value="Citation">Citation</option>
<option value="DTH">Detention Hearing</option>
<option value="Exparte">Exparte Order</option>
<option value="EXP">Expired Warrant</option>
<option value="FRM">Form Letter Sent to Parents</option>
<option value="IYN">ICJ - Utah Parole Not Accepted</option>
<option value="IPN">ICJ-Ut Probation Not Accepted</option>
<option value="CPN">ICJOtherStateParoleNotAccepted</option>
<option value="ION">ICJOtherStateProbNotAccepted</option>
<option value="INF">Information Filed</option>
<option value="INS">Insufficient Facts to Justify</option>
<option value="ICJ">Interstate Compact</option>
<option value="PRS">JJS - Parolee/Escapee Returned</option>
<option value="MOT">Motion Filed</option>
<option value="NOF">No Action Taken After Contact</option>
<option value="NOA">No Action Taken by Intake</option>
<option value="NOJ">No Jurisdiction to Proceed</option>
<option value="NJ">Non-Judicial</option>
<option value="OSC">Order to Show Cause - Contempt</option>
<option value="OTH">Other Non-Petition Action</option>
<option value="PET" selected="selected">Petition</option>
<option value="PCA">Petition Denied by Prosecutor</option>
<option value="PETREFIL">Petition Refile</option>
<option value="REF">Referred to Another Agency</option>
<option value="RET">Returned to Referral Source</option>
<option value="REV">Review Hearing Set</option>
<option value="SHH">Shelter Hearing</option>
<option value="TRH">Transient Returned to Home</option>
<option value="LOC">Unable to Locate the Referred</option>
<option value="Warrant">Warrant</option>
<option value="EXX">Warrant Executed</option>
<option value="VAC">Warrant Vacated</option>
<option value="YPA">Youth Parole Authority</option></select>
</td>

<td nowrap>
<input type="text" name="item[0].intakeDecisionDate" maxlength="10" size="9" value="10-27-2008" id="incident[0].date">
<input type="button" name="date_0_anchor" tabindex="-1" value="." onclick="openCalendarPopUp(document.getElementById('incident[0].date'), 'date_0_anchor');" class="calDateButton">
<input type="button" name="date_0_eraserButton" tabindex="-1" value="." onclick="document.getElementById('incident[0].Date').value=''; return(false);" class="calEraserButton">
</td>

<td nowrap>
<input type="text" name="item[0].intakeDate" maxlength="10" size="9" value="10-16-2008" id="incident[0].date2">
<input type="button" name="date2_0_anchor" tabindex="-1" value="." onclick="openCalendarPopUp(document.getElementById('incident[0].date2'), 'date2_0_anchor');" class="calDateButton">
<input type="button" name="date2_0_eraserButton" tabindex="-1" value="." onclick="document.getElementById('incident[0].Date2').value=''; return(false);" class="calEraserButton">
</td>

<td>
<select name="item[0].hearingType"><option value=""></option>
<option value="5">Arraignment</option>
<option value="4" selected="selected">Arraignment / Pretrial</option>
<option value="6">Bail Hearing</option>
<option value="8">Bench Warrant</option>
<option value="10">Certification</option>
<option value="11">Contempt</option>
<option value="15">Detention Hearing</option>
<option value="14">Disposition</option>
<option value="102">Exparte Motion</option>
<option value="101">Exparte Review</option>
<option value="16">Expungement</option>
<option value="17">Further Disposition</option>
<option value="54">Hearing</option>
<option value="19">Home Detention Review</option>
<option value="57">Initial Hearing</option>
<option value="25">Motion</option>
<option value="96">Motion State Debt Collection</option>
<option value="29">Preliminary Hearing</option>
<option value="31">Pretrial</option>
<option value="78">Protective Order - Evidentiary</option>
<option value="79">Protective Order - Exparte</option>
<option value="80">Protective Order - Hearing</option>
<option value="35">Rehearing</option>
<option value="39">Restitution</option>
<option value="40">Review</option>
<option value="72">Review - O &amp; A</option>
<option value="44">Trial</option>
<option value="70">YPA - Administrative</option>
<option value="89">YPA - Discharge Order</option>
<option value="59">YPA - Initial Hearing</option>
<option value="62">YPA - Parole Hearing</option>
<option value="60">YPA - Progress Hearing</option>
<option value="64">YPA - Rescission Hearing</option>
<option value="66">YPA - Revocation Hearing</option>
<option value="88">YPA - Temporary Detention</option>
<option value="86">YPA Paroled</option>
<option value="85">YPA Temporary Detention</option>
<option value="87">YPA Trial Placement</option></select>
</td>

<td nowrap>
<input type="text" name="item[0].petitionFileDate" maxlength="10" size="9" value="" id="incident[0].date3">
<input type="button" name="date3_0_anchor" tabindex="-1" value="." onclick="openCalendarPopUp(document.getElementById('incident[0].date3'), 'date3_0_anchor');" class="calDateButton">
<input type="button" name="date3_0_eraserButton" tabindex="-1" value="." onclick="document.getElementById('incident[0].Date3').value=''; return(false);" class="calEraserButton">
</td>

<td>
<input type="hidden" name="item[0].incidentId" value="2">
<input type="checkbox" name="item[0].remove" value="on">
<input type="hidden" name="childWelfareFlag" value="N">
</td>
</tr>

</tbody>
</table>
</form>
</div>

The problem is the table is far too wide to display on a normal page, and the "standard" is to use the propritary IE hack to keep the header from scrolling when the number of rows gets large [red]( style="position:relative;top:expression(this.offsetParent.scrollTop-2);" )[/red]. In IE6 the DIV would allow the user to scroll horizontally and the header would follow. But in IE7 with the Strict XHTML DOCTYPE, the scrolling is ... under ... the table (for lack of a better term). The <THEAD> is displayed as normally, but the <TBODY> ends up under the <THEAD> and the width is only the size of the browser window.

Part of me says to just change the DOCTYPE so it is in quirks mode and be done with it, but then I get the feeling that is moving in the wrong direction. How would any of you suggest I solve the problem? Or am I concerned for nothing?

Let me know if you need more info to help answer my question. Thanks in advance,

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“

 

[Vragabond]

How did you deal with compliant browsers before? Would it work in IE7 if you simply removed the old IE6 code? If so, then you could put the IE6 code within a conditional comment that loads only for IE6 and leave the standard code for IE7.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Einstein47]

Um ... er ... we NEVER dealt with compliant browsers - This is an intranet web app that was designed for IE 5.5. The supervisor okayed IE 6, but totally put her foot down that IE 7 was a no no because of the Tabbed browsing interface.

I decided that the IE6 hack for keeping the code on top is the culprit. Getting rid of that, and the page is acceptable now.

I just need to do a search and destroy on all these XHTML pages to know how they will look all funky.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“