Firefox inserts spaces when changing display

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rbinington
    New Member
    • Sep 2006
    • 1
    #1

    Firefox inserts spaces when changing display

    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.

    [CODE=html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>
    FastEntry
    </TITLE>
    </HEAD>
    <BODY>

    <script language="JavaS cript" type="text/javascript"><!--[/code]
    [code=javascript]function doNothing(){
    }
    function setClass(object ID,newClass){
    var object = document.getEle mentById(object ID);
    object.classNam e = newClass;
    }

    function setDisplay(obje ctID,state) {
    var object = document.getEle mentById(object ID);
    if(object != null)
    object.style.di splay = state;
    }

    function toggleDisplay(o bjectID) {
    var object = document.getEle mentById(object ID);
    state = object.style.di splay;
    if (state == 'none')
    object.style.di splay = 'block';
    else if (state != 'none')
    object.style.di splay = 'none';
    }
    function swapValues(obje ctFromID, objectToID) {}

    // -->[/code][code=html]
    </script>

    <!-- Start_Module_56 1 --><div id="dnn_ctr561_ ModuleContent">
    <div id="js"><scrip t language="JavaS cript" type="text/javascript"><!--
    function NAFEClearPanels (objectID)
    {
    setDisplay('rep Pages__ctl0_tbl Item', 'none');
    setClass('repBa r__ctl0_cellIte m', 'NAFEItem');
    setClass('repBa r__ctl0_lnk', 'NAFEItem');
    setDisplay('rep Pages__ctl1_tbl Item', 'none');
    setClass('repBa r__ctl1_cellIte m', 'NAFEItem');
    setClass('repBa r__ctl1_lnk', 'NAFEItem');

    var s = 'repPages__ctl' + objectID + '_tblItem';
    setDisplay(s, 'block');
    }

    // -->
    </script>
    </div>
    <table id="tbl" cellspacing="0" cellpadding="0" width="600" border="0">
    <tr id="rowNoModule " style="display: none;">
    <td class="SubHead" >

    </td>
    </tr>

    <tr id="rowModuleEx ists" style="display: block;">
    <td>
    <table id="tblExists" width="600" border="0">
    <tr>
    <TD align="center"> <span id="lblError" class="NAFEErro r"></span></TD>
    </tr>
    <tr>
    <td class="SubHead" ><span id="lblTitle" class="SubHead" >Article Title</span></td>

    </tr>
    <tr>
    <td class="SubHead" ><input name="txtTitle" type="text" id="txtTitle" style="width:60 0px;" /></td>
    </tr>
    <tr id="rowBar" style="display: block;">
    <TD align="left">
    <table cellSpacing="0" width="100%">
    <tr class="NAFEItem ">

    <td id="repBar__ctl 0_cellItem" nowrap="nowrap" align="center" class="NAFESele ctedItem">&nbsp ;&nbsp;<a href="javascrip t:doNothing();" id="repBar__ctl 0_lnk" class="NAFESele ctedItem" onclick="javasc ript:NAFEClearP anels(0);">Summ ary</a>&nbsp;&nbsp; </td>



    <td id="repBar__ctl 1_cellItem" nowrap="nowrap" align="center" class="NAFEItem ">&nbsp;&nbsp;< a href="javascrip t:doNothing();" id="repBar__ctl 1_lnk" class="NAFEItem " onclick="javasc ript:NAFEClearP anels(1);">Page One</a>&nbsp;&nbsp; </td>


    <td id="cellAddPage " class="NAFEItem " align="right" width="600"><a id="btnAddPage " class="NAFEItem " onclick="javasc ript:saveEditor Text('txt', 'repPages__ctl' + document.getEle mentById('hidCu rrentPage').val ue + '_PageText');" href="javascrip t:__doPostBack( 'dnn$ctr561$New sArticles_FastE ntry$btnAddPage ','')">Add Page</a></td>

    </tr>
    </table>
    </TD>
    </tr>
    <tr id="rowPages" style="display: block;">
    <td>

    <table width="100%">

    <tr id="repPages__c tl0_tblItem" style="display: block;">
    <td id="repPages__c tl0_ItemCell" width="600">
    <table id="repPages__c tl0_tblItems" width="600" border="0">
    <tr>
    <td class="SubHead" >
    <span id="repPages__c tl0_plPageTitle " class="SubHead" >Page Title</span></td>
    <td align="right" nowrap="nowrap" >

    <table align="right">
    <tr>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">


    </td>
    <td height="16" width="16">

    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2">




    <table width="100%">
    <tr id="repPages__c tl0_rowTextBox" style="display: none;">
    <td><input name="repPages: _ctl0:title" id="repPages__c tl0_title" type="text" size="80" value="Summary" style="width:60 0;" /></td>
    </tr>

    <tr id="repPages__c tl0_rowLabel" style="display: block;">
    <td height="25">Sum mary</td>
    </tr>

    </table>

    <input name="repPages: _ctl0:PageText" id="repPages__c tl0_PageText" type="Hidden" value="This is the summary." />
    </td>
    </tr>
    <tr bgcolor="black" style="Height:1 px">
    <td height="1" colspan="2"></td>
    </tr>
    </table>

    </td>
    </tr>



    <tr id="repPages__c tl1_tblItem" style="display: none">
    <td id="repPages__c tl1_ItemCell" width="600">
    <table id="repPages__c tl1_tblItems" width="600" border="0">
    <tr>
    <td class="SubHead" >
    <span id="repPages__c tl1_plPageTitle " class="SubHead" >Page Title</span></td>
    <td align="right" nowrap="nowrap" >
    <table align="right">

    <tr>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">

    </td>
    <td height="16" width="16">

    </td>

    <td height="16" width="16">

    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td colspan="2">



    <table width="100%">

    <tr id="repPages__c tl1_rowTextBox" style="display: block;">
    <td><input name="repPages: _ctl1:title" id="repPages__c tl1_title" type="text" size="80" value="Page One" style="width:60 0;" /></td>
    </tr>

    <tr id="repPages__c tl1_rowLabel" style="display: none;">
    <td height="25">Pag e One</td>
    </tr>

    </table>
    <input name="repPages: _ctl1:PageText" id="repPages__c tl1_PageText" type="Hidden" value="This is the first page" />

    </td>
    </tr>
    <tr bgcolor="black" style="Height:1 px">
    <td height="1" colspan="2"></td>
    </tr>
    </table>

    </td>
    </tr>

    </table>

    <br>
    <div><input type="hidden" id="txt" name="txt" value="This is the summary." /><input type="hidden" id="txt___Confi g" value="" /><iframe id="txt___Frame " src="/FCKeditor/editor/fckeditor.html? InstanceName=tx t&amp;Toolbar=D efault" width="600px" height="200px" frameborder="0" scrolling="no"> </iframe></div></td>
    </tr>
    <tr id="rowFeatured ">
    <TD align="left"><s pan class="SubHead" ><label for="chkFeature d">Featured? </label><input id="chkFeatured " type="checkbox" name="chkFeatur ed" /></span></TD>
    </tr>
    <tr id="rowCategori es">
    <TD align="left" height="2">

    <table border="0">
    <tr>
    <td class="Subhead" ><span id="lblCategori es" class="SubHead" >Categories</span></td>
    <td><table id="chkCategori es" class="Normal" cellspacing="2" cellpadding="2" border="0">
    <tr>
    <td><input id="chkCategori es_0" type="checkbox" name="chkCatego ries:0" /><label for="chkCategor ies_0">News</label></td><td><input id="chkCategori es_1" type="checkbox" name="chkCatego ries:1" /><label for="chkCategor ies_1">Sports</label></td><td><input id="chkCategori es_2" type="checkbox" name="chkCatego ries:2" /><label for="chkCategor ies_2">Weather</label></td>
    </tr>

    </table></td>
    </tr>
    </table>
    </TD>
    </tr>
    <tr>
    <TD align="left" height="2">
    <TABLE id="Table1">
    <TR>

    <TD id="rowStartDat eLabel"><span id="lblStartDat e" class="SubHead" >Publish Date</span></TD>

    <TD id="rowEndDateL abel"><span id="lblEndDate " class="SubHead" >Expiry Date</span></TD>

    </TR>
    <TR>
    <TD id="rowStartDat e"></TD>

    <TD id="rowEndDate" ></TD>

    </TR>
    </TABLE>
    </TD>
    </tr>
    <tr>
    <td align="center"> <input type="submit" name="btnAdd" value="Add" id="btnAdd" onclick="javasc ript:saveEditor Text('txt', 'repPages__ctl' + document.getEle mentById('hidCu rrentPage').val ue + '_PageText');" /></td>
    </tr>

    </table>

    </td>
    </tr>
    <tr>
    <TD align="left"></TD>
    </tr>
    </table>

    <input name="hidCurren tPage" id="hidCurrentP age" type="hidden" size="1" value="0" /><input name="hidTitle" id="hidTitle" type="hidden" size="1" /><input name="hidPageTe xt" id="hidPageText " type="hidden" size="1" />
    </div><!-- End_Module_561 -->

    </BODY>

    </HTML>
    [/CODE]
    Any help would be appreciated
    Richard
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      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).

        Comment

        Previous template Next
        Working...