1

I have a query looping and displaying data in a table. However I noticed a an odd behavior in IE. For some reason it skips a <td> and make the entire table structure looks weird. This only happens in IE.

in IE, enter image sdgdsgdhere

in Chrome, enter image description here

Here is my html,, I meant to say, Here is my cfm

<TABLE id="WorkOrderList">
  <TBODY>
    <cfloop query="qGetClosed">
    <TR class="spacer"><td>&nbsp;</td></TR>
    <TR>
      <TH id="woNum" class="woNum_cls" rowspan="2"> 
        <a href="WorkOrderAssign.cfm?WONUM=#URLEncodedFormat(trim(qGetClosed.WONUM))#&CanAssign=No">#trim(qGetClosed.WONUM)#</a>
      </TH>
      <TH class="woPriority_cls #pClr#">#trim(qGetClosed.PRIORITY)#</TH> 
      <TH class="woLocation_cls">#trim(qGetReqInfo_MyTables.woLocation)#</TH>
      <TH class="woStatus_cls">#trim(qGetClosed.DELAYDESC)#</TH>    
      <TH class="woRequester_cls">#trim(qGetClosed.UD1)#</TH>
      <TH class="woDate_cls">#DATEFORMAT(qGetClosed.REQUESTDATE,"mm/dd/yyyy")#</TH>
      <TH class="woAssigned_cls">
        <DIV class="woAssigned_Bottom">
          <div class="woAssigned_By">
            <cfif #trim(qGetClosed.ASSIGNEDBY)# NEQ ''>
              #trim(qGetClosed.ASSIGNEDBY)#
            <cfelse>
              <i>n/a</i>
            </cfif>
          </div>
          <div class="woAssigned_Date">
            <cfif IsDefined('qGetClosed.SCHEDSTARTDATE') AND #qGetClosed.SCHEDSTARTDATE# NEQ ''>
              #DateFormat(qGetClosed.SCHEDSTARTDATE, "mm/dd/yyyy")#
            <cfelse>
              n/a
            </cfif>
          </div>
          <div class="woAssigned_To">
            <cfif #trim(qGetClosed.ASSIGNEDTO)# IS ''>
              <i>n/a</i>
            <cfelseif #trim(qGetClosed.ASSIGNEDTO)# IS 'n/a'>
              <i>n/a</i>
            <cfelse>
              #trim(qGetClosed.ASSIGNEDTO)#
            </cfif>
          </div>
        </DIV>
      </TH>
      <TH class="woDate_cls">#DATEFORMAT(qGetClosed.COMPLETIONDATE,"mm/dd/yyyy")#</TH>
      <TH class="woDuration_cls" rowspan="2">#trim(qGetClosed.DURATION)# day(s)</TH>
    </TR>
    <TR>
      <TH class="woDescription" colspan="7">&nbsp;#trim(qGetClosed.DESCRIPTION)#</TH>   
    </TR>
    </cfloop>
  </TBODY>
</TABLE>

And here is my css,

/*---------Entire List Work Order------*/
.woNum_cls{width:65px; text-transform:uppercase;}
.woReminder_cls{width:80px; text-align:center;}
.woPriority_cls{width:15px;}
.woLocation_cls{width:125px;}
.woStatus_cls{width:125px; left:500em;}
.woRequester_cls{width:100px;}
.woDate_cls{width:100px;}
.woAssigned_cls{width:160px;}
.woDuration_cls{width:78px;}

TABLE#WorkOrderList{
  border-collapse:collapse; border-spacing:0px; border:0px;
  width:975px;
  display:table;
}
TABLE#WorkOrderList THEAD TH{
  color: #000; background-color:#9999FF;
  border: 1px solid black; border-spacing:0px;
  text-transform:uppercase; text-align:left;
  font-weight:bold;
  padding:0px 2px 0px 3px;
}
TABLE#WorkOrderList TBODY TH{padding:0px 2px 0px 3px; line-height:none; display:table-cell;}
TABLE#WorkOrderList TBODY TH:not(.woDescription){font-weight:bold;}
TABLE#WorkOrderList TBODY TH:not(.woPriority_cls){background-color:#E6F2F2;}

.woAssigned .woAssigned_Top{text-align:center;}
.woAssigned .woAssigned_Bottom{text-align:left;}

.woAssigned_Bottom .woAssigned_By{width:25px; float:left;}
.woAssigned_Bottom .woAssigned_Date{width:90px; float:left; text-align:center;}
.woAssigned_Bottom .woAssigned_To{width:30px; float:right;}    

TABLE#WorkOrderList TBODY TH{border:1px dotted #006A35;} 
TABLE#WorkOrderList #woNum{border:1px solid blue;}
TABLE#WorkOrderList #woReminder{border:1px solid blue;}

This is driving me insane and any help is greatly appreciated.

19
  • 8
    What does the generated HTML look like? Does it validate?
    – cimmanon
    Jan 4, 2013 at 15:30
  • 1
    What does the output html look like? Judging by the screen shots, I'd say you have data being constructed that may be interfering with the html itself. Jan 4, 2013 at 15:30
  • 1
    @Forty-Two Those are ColdFusion tags, the <cfelse> doesn't actually have a closing tag. However, I agree that the generated HTML as seen by the browser would give more insight in any possible markup errors. Jan 4, 2013 at 15:32
  • 3
    Other people have mentioned that you should be providing the HTML and not the CF code. In the general case: If server side code doesn't produce the rendering you expect in the browser, before asking for help, determine if the server side code is failing to generate the HTML you expect or if the HTML you want is not producing the effect you want.
    – Quentin
    Jan 4, 2013 at 15:37
  • 2
    You should post a section of generated HTML that's showing the problem so we can see what might be the cause. @Nicklepedde may very well have the answer for you already, though I've never seem that particular behavior myself.
    – Dan Short
    Jan 4, 2013 at 21:19

1 Answer 1

3

There is a bug in IE9 that has a hard time dealing with huge tables, and creates "ghost cells" out of white space between td tags. (Go figure eh?)

The best way to fix is try to remove all white space between the tags. Might make for funky looking markup, but you can cheat by doing something like this:

 ...</td><!---//using a CF comment in the white space hides it from the browser, and helps poor IE..
  ---><td>...
3
  • Incredibly hard to believe that this kind of flaw exists, but I just ran into the exact same thing, and it was also fixed by removing the space between each </td> and the next <td>. Must be the dumbest IE bug I've seen all week.
    – Joe Enos
    Oct 9, 2014 at 18:32
  • If the table rows and columns are generated dynamically then it would be very hectic work to remove all white-spaces manually.
    – Rish
    Jun 16, 2016 at 10:01
  • That depends, if it's generated dynamically on the server side, then you have full control over your source, should not be an issue to suppress that white space. If you adding it in dynamically in the client, via JS, then no worries, pretty sure DOM manipulation won't add white space unless you ask. Jul 5, 2016 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.