By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,894 Members | 2,002 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,894 IT Pros & Developers. It's quick & easy.

Firefox inserts spaces when changing display

P: 1
Hi,

I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I want only one instance of the FCKEditor on the screen at one time so I make tabs that the user can click and I store the values in variables behind the scenes. I change the CSS class on the link that is the currently selected one.

I have a really weird thing happening in Firefox when I try to change the className on the link currently selected link. It randomly inserts about 200px of white space when I change the link. You may have to click Page One and then Summary to get it to work. The error happens on line 49 when I change the display of the link. All of the other code around it (that is doing exactly the same thing) works. IE it works fine.

I have stripped out a lot of the code that is irrelevant and I have validated it.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.     <HEAD>
  4.         <TITLE>
  5.             FastEntry
  6.         </TITLE>
  7.     </HEAD>
  8. <BODY>
  9.  
  10. <script language="JavaScript" type="text/javascript"><!--
Expand|Select|Wrap|Line Numbers
  1. function doNothing(){
  2. }
  3. function setClass(objectID,newClass){
  4.     var object = document.getElementById(objectID);
  5.     object.className = newClass;
  6. }
  7.  
  8. function setDisplay(objectID,state) {
  9.     var object = document.getElementById(objectID);
  10.     if(object != null)
  11.         object.style.display = state;
  12. }
  13.  
  14. function toggleDisplay(objectID) {
  15.     var object = document.getElementById(objectID);
  16.     state = object.style.display;
  17.     if (state == 'none')
  18.         object.style.display = 'block';
  19.     else if (state != 'none')
  20.         object.style.display = 'none';
  21. }
  22. function swapValues(objectFromID, objectToID) {}
  23.  
  24. // -->
Expand|Select|Wrap|Line Numbers
  1. </script>
  2.  
  3. <!-- Start_Module_561 --><div id="dnn_ctr561_ModuleContent">
  4.     <div id="js"><script language="JavaScript" type="text/javascript"><!--
  5. function NAFEClearPanels(objectID)
  6. {
  7.     setDisplay('repPages__ctl0_tblItem', 'none');
  8.     setClass('repBar__ctl0_cellItem', 'NAFEItem');
  9.     setClass('repBar__ctl0_lnk', 'NAFEItem');
  10.     setDisplay('repPages__ctl1_tblItem', 'none');
  11.     setClass('repBar__ctl1_cellItem', 'NAFEItem');
  12.     setClass('repBar__ctl1_lnk', 'NAFEItem');    
  13.  
  14.     var s = 'repPages__ctl' + objectID + '_tblItem';
  15.     setDisplay(s, 'block');
  16. }
  17.  
  18. // -->
  19. </script>
  20. </div>
  21. <table id="tbl" cellspacing="0" cellpadding="0" width="600" border="0">
  22.         <tr id="rowNoModule" style="display:none;">
  23.             <td class="SubHead">
  24.  
  25.             </td>
  26.         </tr>
  27.  
  28.         <tr id="rowModuleExists" style="display:block;">
  29.             <td>
  30.                 <table id="tblExists" width="600" border="0">
  31.                 <tr>
  32.                     <TD align="center"><span id="lblError" class="NAFEError"></span></TD>
  33.                 </tr>
  34.                 <tr>
  35.                     <td class="SubHead"><span id="lblTitle" class="SubHead">Article Title</span></td>
  36.  
  37.                 </tr>
  38.                 <tr>
  39.                     <td class="SubHead"><input name="txtTitle" type="text" id="txtTitle" style="width:600px;" /></td>
  40.                 </tr>
  41.                 <tr id="rowBar" style="display:block;">
  42.                     <TD align="left">
  43.                                 <table cellSpacing="0" width="100%">
  44.                                     <tr class="NAFEItem">
  45.  
  46.                                                 <td id="repBar__ctl0_cellItem" nowrap="nowrap" align="center" class="NAFESelectedItem">&nbsp;&nbsp;<a href="javascript:doNothing();" id="repBar__ctl0_lnk" class="NAFESelectedItem" onclick="javascript:NAFEClearPanels(0);">Summary</a>&nbsp;&nbsp;</td>
  47.  
  48.  
  49.  
  50.                                                 <td id="repBar__ctl1_cellItem" nowrap="nowrap" align="center" class="NAFEItem">&nbsp;&nbsp;<a href="javascript:doNothing();" id="repBar__ctl1_lnk" class="NAFEItem" onclick="javascript:NAFEClearPanels(1);">Page One</a>&nbsp;&nbsp;</td>
  51.  
  52.  
  53.                                         <td id="cellAddPage" class="NAFEItem" align="right" width="600"><a id="btnAddPage" class="NAFEItem" onclick="javascript:saveEditorText('txt', 'repPages__ctl' + document.getElementById('hidCurrentPage').value + '_PageText');" href="javascript:__doPostBack('dnn$ctr561$NewsArticles_FastEntry$btnAddPage','')">Add Page</a></td>
  54.  
  55.                                     </tr>
  56.                                 </table>
  57.                             </TD>
  58.                 </tr>
  59.                 <tr id="rowPages" style="display:block;">
  60.                     <td>
  61.  
  62.                                 <table width="100%">
  63.  
  64.                                             <tr id="repPages__ctl0_tblItem" style="display:block;">
  65.                         <td id="repPages__ctl0_ItemCell" width="600">
  66.                                                     <table id="repPages__ctl0_tblItems" width="600" border="0">
  67.                             <tr>
  68.                                 <td class="SubHead">
  69.                                                                 <span id="repPages__ctl0_plPageTitle" class="SubHead">Page Title</span></td>
  70.                                 <td align="right" nowrap="nowrap">
  71.  
  72.                                                                 <table align="right">
  73.                                                                     <tr>
  74.                                                                         <td height="16" width="16">
  75.  
  76.                                                                         </td>
  77.                                                                         <td height="16" width="16">
  78.  
  79.                                                                         </td>
  80.                                                                         <td height="16" width="16">
  81.  
  82.                                                                         </td>
  83.                                                                         <td height="16" width="16">
  84.  
  85.  
  86.                                                                         </td>
  87.                                                                         <td height="16" width="16">
  88.  
  89.                                                                         </td>
  90.                                                                     </tr>
  91.                                                                 </table>
  92.                                                             </td>
  93.                             </tr>
  94.                             <tr>
  95.                                 <td colspan="2">
  96.  
  97.  
  98.  
  99.  
  100.                                                                 <table width="100%">
  101.                                                                     <tr id="repPages__ctl0_rowTextBox" style="display:none;">
  102.                                     <td><input name="repPages:_ctl0:title" id="repPages__ctl0_title" type="text" size="80" value="Summary" style="width:600;" /></td>
  103.                                 </tr>
  104.  
  105.                                                                     <tr id="repPages__ctl0_rowLabel" style="display:block;">
  106.                                     <td height="25">Summary</td>
  107.                                 </tr>
  108.  
  109.                                                                 </table>
  110.  
  111.                                                                 <input name="repPages:_ctl0:PageText" id="repPages__ctl0_PageText" type="Hidden" value="This is the summary." />
  112.                                                             </td>
  113.                             </tr>
  114.                             <tr bgcolor="black" style="Height:1px">
  115.                                 <td height="1" colspan="2"></td>
  116.                             </tr>
  117.                         </table>
  118.  
  119.                                                 </td>
  120.                     </tr>
  121.  
  122.  
  123.  
  124.                                             <tr id="repPages__ctl1_tblItem" style="display:none">
  125.                         <td id="repPages__ctl1_ItemCell" width="600">
  126.                                                     <table id="repPages__ctl1_tblItems" width="600" border="0">
  127.                             <tr>
  128.                                 <td class="SubHead">
  129.                                                                 <span id="repPages__ctl1_plPageTitle" class="SubHead">Page Title</span></td>
  130.                                 <td align="right" nowrap="nowrap">
  131.                                                                 <table align="right">
  132.  
  133.                                                                     <tr>
  134.                                                                         <td height="16" width="16">
  135.  
  136.                                                                         </td>
  137.                                                                         <td height="16" width="16">
  138.  
  139.                                                                         </td>
  140.                                                                         <td height="16" width="16">
  141.  
  142.                                                                         </td>
  143.                                                                         <td height="16" width="16">
  144.  
  145.                                                                         </td>
  146.  
  147.                                                                         <td height="16" width="16">
  148.  
  149.                                                                         </td>
  150.                                                                     </tr>
  151.                                                                 </table>
  152.                                                             </td>
  153.                             </tr>
  154.                             <tr>
  155.                                 <td colspan="2">
  156.  
  157.  
  158.  
  159.                                                                 <table width="100%">
  160.  
  161.                                                                     <tr id="repPages__ctl1_rowTextBox" style="display:block;">
  162.                                     <td><input name="repPages:_ctl1:title" id="repPages__ctl1_title" type="text" size="80" value="Page One" style="width:600;" /></td>
  163.                                 </tr>
  164.  
  165.                                                                     <tr id="repPages__ctl1_rowLabel" style="display:none;">
  166.                                     <td height="25">Page One</td>
  167.                                 </tr>
  168.  
  169.                                                                 </table>
  170.                                                                 <input name="repPages:_ctl1:PageText" id="repPages__ctl1_PageText" type="Hidden" value="This is the first page" />
  171.  
  172.                                                             </td>
  173.                             </tr>
  174.                             <tr bgcolor="black" style="Height:1px">
  175.                                 <td height="1" colspan="2"></td>
  176.                             </tr>
  177.                         </table>
  178.  
  179.                                                 </td>
  180.                     </tr>
  181.  
  182.                                         </table>
  183.  
  184.                                 <br>
  185.                                 <div><input type="hidden" id="txt" name="txt" value="This is the summary." /><input type="hidden" id="txt___Config" value="" /><iframe id="txt___Frame" src="/FCKeditor/editor/fckeditor.html?InstanceName=txt&amp;Toolbar=Default" width="600px" height="200px" frameborder="0" scrolling="no"></iframe></div></td>
  186.                 </tr>
  187.                 <tr id="rowFeatured">
  188.                     <TD align="left"><span class="SubHead"><label for="chkFeatured">Featured?</label><input id="chkFeatured" type="checkbox" name="chkFeatured" /></span></TD>
  189.                 </tr>
  190.                 <tr id="rowCategories">
  191.                     <TD align="left" height="2">
  192.  
  193.                                 <table border="0">
  194.                                     <tr>
  195.                                         <td class="Subhead"><span id="lblCategories" class="SubHead">Categories</span></td>
  196.                                         <td><table id="chkCategories" class="Normal" cellspacing="2" cellpadding="2" border="0">
  197.                         <tr>
  198.                             <td><input id="chkCategories_0" type="checkbox" name="chkCategories:0" /><label for="chkCategories_0">News</label></td><td><input id="chkCategories_1" type="checkbox" name="chkCategories:1" /><label for="chkCategories_1">Sports</label></td><td><input id="chkCategories_2" type="checkbox" name="chkCategories:2" /><label for="chkCategories_2">Weather</label></td>
  199.                         </tr>
  200.  
  201.                     </table></td>
  202.                                     </tr>
  203.                                 </table>
  204.                             </TD>
  205.                 </tr>
  206.                 <tr>
  207.                     <TD align="left" height="2">
  208.                                 <TABLE id="Table1">
  209.                                     <TR>
  210.  
  211.                                         <TD id="rowStartDateLabel"><span id="lblStartDate" class="SubHead">Publish Date</span></TD>
  212.  
  213.                                         <TD id="rowEndDateLabel"><span id="lblEndDate" class="SubHead">Expiry Date</span></TD>
  214.  
  215.                                     </TR>
  216.                                     <TR>
  217.                                         <TD id="rowStartDate"></TD>
  218.  
  219.                                         <TD id="rowEndDate"></TD>
  220.  
  221.                                     </TR>
  222.                                 </TABLE>
  223.                             </TD>
  224.                 </tr>
  225.                 <tr>
  226.                     <td align="center"><input type="submit" name="btnAdd" value="Add" id="btnAdd" onclick="javascript:saveEditorText('txt', 'repPages__ctl' + document.getElementById('hidCurrentPage').value + '_PageText');" /></td>
  227.                 </tr>
  228.  
  229.             </table>
  230.  
  231.             </td>
  232.         </tr>
  233.         <tr>
  234.             <TD align="left"></TD>
  235.         </tr>
  236.     </table>
  237.  
  238. <input name="hidCurrentPage" id="hidCurrentPage" type="hidden" size="1" value="0" /><input name="hidTitle" id="hidTitle" type="hidden" size="1" /><input name="hidPageText" id="hidPageText" type="hidden" size="1" />
  239. </div><!-- End_Module_561 -->
  240.  
  241.     </BODY>
  242.  
  243. </HTML>
  244.  
Any help would be appreciated
Richard
Sep 7 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
If changing the display property of table rows/cells, they need to be set to "table-row", "table-cell", etc., not "block". In IE, it needs to be set to "block", so a compromise is to set it to the empty string (default display).
Jun 8 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.