offset between left and right part of chart table in Internet Explorer

[falkb]

The tickets bars are more above than their description. See the screenshot. Seen with IE 9, Firefox 13 has no problems. Seems it's reasoned by different table cell or font heights, though I don't know where to fix it.

[falkb]

This one should help:

tracjsganttplugin/0.11/tracjsgantt/htdocs/jsgantt.js

@@ -1184 +1184 @@
      }
      
      if (vFormatArr.join().indexOf("quarter")!=-1) { 
-         if (vFormat=='quarter') vLeftTable += '<INPUT TYPE=RADIO NAME="radFormat_'+vGanttVar+'" VALUE="quarter" checked>Quarter';
-         else                vLeftTable += '<INPUT TYPE=RADIO NAME="radFormat_'+vGanttVar+'" onclick=JSGantt.changeFormat("quarter",'+vGanttVar+') VALUE="quarter">Quarter';
+         if (vFormat=='quarter') vLeftTable += '<INPUT TYPE=RADIO NAME="radFormat_'+vGanttVar+'" VALUE="quarter" checked>Qtr.';
+         else                vLeftTable += '<INPUT TYPE=RADIO NAME="radFormat_'+vGanttVar+'" onclick=JSGantt.changeFormat("quarter",'+vGanttVar+') VALUE="quarter">Qtr.';
      }
             
 //            vLeftTable += '<INPUT TYPE=RADIO NAME="other" VALUE="other" style="display:none"> .';
@@ -1201 +1201 @@
          if(vShowRes ==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 60px; HEIGHT: 20px" align=center nowrap>Resource</TD>' ;
          if(vShowDur ==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 60px; HEIGHT: 20px" align=center nowrap>Duration</TD>' ;
          if(vShowComp==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 60px; HEIGHT: 20px" align=center nowrap>% Comp.</TD>' ;
-         if(vShowStartDate==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 60px; HEIGHT: 20px" align=center nowrap>Start Date</TD>' ;
+         if(vShowStartDate==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 65px; HEIGHT: 20px" align=center nowrap>Start Date</TD>' ;
          if(vShowEndDate==1) vLeftTable += '  <TD style="BORDER-TOP: #efefef 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; WIDTH: 60px; HEIGHT: 20px" align=center nowrap>End Date</TD>' ;
  
          vLeftTable += '</TR>';
@@ -1274 +1274 @@
             // Draw the Chart Rows
             vRightTable = 
             '<DIV class=scroll2 id=rightside_'+pGanttVar+'>' +
-            '<TABLE style="width: ' + vChartWidth + 'px;" cellSpacing=0 cellPadding=0 border=0>' +
-            '<TBODY><TR style="HEIGHT: 18px">';
+            '<TABLE style="width: ' + vChartWidth + 'px;" cellSpacing=0 cellPadding=0 border=0>';
+            if (JSGantt.isIE()) { // IE;
+                vRightTable += '<TBODY><TR style="HEIGHT: 25px">';
+            } else {
+                vRightTable += '<TBODY><TR style="HEIGHT: 18px">';
+            }
 
             vTmpDate.setFullYear(vMinDate.getFullYear(), vMinDate.getMonth(), vMinDate.getDate());
             vTmpDate.setHours(0);

Abbreviation "Qtr." is because of a bad line break because the words are too long in IE.

P.S.: Note, there are also these ones adressing the problem: ​http://code.google.com/p/jsgantt/issues/detail?id=61&sort=type ​http://code.google.com/p/jsgantt/issues/detail?id=54&sort=type

[Chris Nelson]

(In [11743]) Better table alignment in IE. Refs #10148.

Thanks to falkb for the patch!

This looks OK to me on Firefox and Chromium so I guess it doesn't break anything. I don't have a good way to test IE.