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.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

    <HEAD>

        <TITLE>

            FastEntry

        </TITLE>

    </HEAD>

<BODY>
 
<script language="JavaScript" type="text/javascript"><!--

Expand|Select|Wrap|Line Numbers

 function doNothing(){

}

function setClass(objectID,newClass){

    var object = document.getElementById(objectID);

    object.className = newClass;

}
 
function setDisplay(objectID,state) {

    var object = document.getElementById(objectID);

    if(object != null)

        object.style.display = state;

}
 
function toggleDisplay(objectID) {

    var object = document.getElementById(objectID);

    state = object.style.display;

    if (state == 'none')

        object.style.display = 'block';

    else if (state != 'none')

        object.style.display = 'none';

}

function swapValues(objectFromID, objectToID) {}
 
// -->

Expand|Select|Wrap|Line Numbers

 
</script>
 
<!-- Start_Module_561 --><div id="dnn_ctr561_ModuleContent">

    <div id="js"><script language="JavaScript" type="text/javascript"><!--

function NAFEClearPanels(objectID)

{

    setDisplay('repPages__ctl0_tblItem', 'none');

    setClass('repBar__ctl0_cellItem', 'NAFEItem');

    setClass('repBar__ctl0_lnk', 'NAFEItem');

    setDisplay('repPages__ctl1_tblItem', 'none');

    setClass('repBar__ctl1_cellItem', 'NAFEItem');

    setClass('repBar__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="rowModuleExists" style="display:block;">

            <td>

                <table id="tblExists" width="600" border="0">

                <tr>

                    <TD align="center"><span id="lblError" class="NAFEError"></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:600px;" /></td>

                </tr>

                <tr id="rowBar" style="display:block;">

                    <TD align="left">

                                <table cellSpacing="0" width="100%">

                                    <tr class="NAFEItem">
 
                                                <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>
 
                                                <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>
 
                                        <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>
 
                                    </tr>

                                </table>

                            </TD>

                </tr>

                <tr id="rowPages" style="display:block;">

                    <td>
 
                                <table width="100%">
 
                                            <tr id="repPages__ctl0_tblItem" style="display:block;">

                        <td id="repPages__ctl0_ItemCell" width="600">

                                                    <table id="repPages__ctl0_tblItems" width="600" border="0">

                            <tr>

                                <td class="SubHead">

                                                                <span id="repPages__ctl0_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__ctl0_rowTextBox" style="display:none;">

                                    <td><input name="repPages:_ctl0:title" id="repPages__ctl0_title" type="text" size="80" value="Summary" style="width:600;" /></td>

                                </tr>
 
                                                                    <tr id="repPages__ctl0_rowLabel" style="display:block;">

                                    <td height="25">Summary</td>

                                </tr>
 
                                                                </table>
 
                                                                <input name="repPages:_ctl0:PageText" id="repPages__ctl0_PageText" type="Hidden" value="This is the summary." />

                                                            </td>

                            </tr>

                            <tr bgcolor="black" style="Height:1px">

                                <td height="1" colspan="2"></td>

                            </tr>

                        </table>
 
                                                </td>

                    </tr>
 
                                            <tr id="repPages__ctl1_tblItem" style="display:none">

                        <td id="repPages__ctl1_ItemCell" width="600">

                                                    <table id="repPages__ctl1_tblItems" width="600" border="0">

                            <tr>

                                <td class="SubHead">

                                                                <span id="repPages__ctl1_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__ctl1_rowTextBox" style="display:block;">

                                    <td><input name="repPages:_ctl1:title" id="repPages__ctl1_title" type="text" size="80" value="Page One" style="width:600;" /></td>

                                </tr>
 
                                                                    <tr id="repPages__ctl1_rowLabel" style="display:none;">

                                    <td height="25">Page One</td>

                                </tr>
 
                                                                </table>

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

                            </tr>

                            <tr bgcolor="black" style="Height:1px">

                                <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___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>

                </tr>

                <tr id="rowFeatured">

                    <TD align="left"><span class="SubHead"><label for="chkFeatured">Featured?</label><input id="chkFeatured" type="checkbox" name="chkFeatured" /></span></TD>

                </tr>

                <tr id="rowCategories">

                    <TD align="left" height="2">
 
                                <table border="0">

                                    <tr>

                                        <td class="Subhead"><span id="lblCategories" class="SubHead">Categories</span></td>

                                        <td><table id="chkCategories" class="Normal" cellspacing="2" cellpadding="2" border="0">

                        <tr>

                            <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>

                        </tr>
 
                    </table></td>

                                    </tr>

                                </table>

                            </TD>

                </tr>

                <tr>

                    <TD align="left" height="2">

                                <TABLE id="Table1">

                                    <TR>
 
                                        <TD id="rowStartDateLabel"><span id="lblStartDate" class="SubHead">Publish Date</span></TD>
 
                                        <TD id="rowEndDateLabel"><span id="lblEndDate" class="SubHead">Expiry Date</span></TD>
 
                                    </TR>

                                    <TR>

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

                                </TABLE>

                            </TD>

                </tr>

                <tr>

                    <td align="center"><input type="submit" name="btnAdd" value="Add" id="btnAdd" onclick="javascript:saveEditorText('txt', 'repPages__ctl' + document.getElementById('hidCurrentPage').value + '_PageText');" /></td>

                </tr>
 
            </table>
 
            </td>

        </tr>

        <tr>

            <TD align="left"></TD>

        </tr>

    </table>
 
<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" />

</div><!-- End_Module_561 -->
 
    </BODY>
 
</HTML>

Any help would be appreciated
Richard

Sep 7 '06 #1

Subscribe Post Reply

4501

acoder

16,027

Expert Mod 8TB

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

Firefox inserts spaces when changing display

Similar topics