Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1221
  • Last Modified:

css Safari/Firefox problem with td innerHTML move

Help! I'm stumped with a css issue working in IE, not in Firefox or Safari - I've got a Javascript function on a discussion forum page which takes form fields from the top of the page, and moves them with the 'innerHTML' property to a table cell next to a post someone is replying to. IE moves the fields no problem to the target table cell, but both Safari and Firefox add the fields to a table cell spanning only the width of the first cell in the table, ignoring the colspan="2" attribute in the target sell. Strange fruit.

My attached code shows the Javascript function and the target rows below in the forum table.

Anyone have any experience with this conundrum? Any help will be greatly appreciated.

Thanks,
Steve


<html><head>
<script language="javascript" type="text/javascript">
function addReply(trID, divID, pID) {
    var oDestDiv = document.getElementById(divID);
    var oDestTr = document.getElementById(trID);
    var oSrcFrm = document.getElementById("frmPost");
    var oSrcDiv;
    if (document.getElementById("hdDivFrm").value == "") {
        oSrcDiv = oSrcFrm;
    } else {
        oSrcDiv = document.getElementById(document.getElementById("hdDivFrm").value);
    }
    document.getElementById("hdDivFrm").value = divID;
    oDestDiv.innerHTML = oSrcDiv.innerHTML;
    oDestTr.style.display = "inline";
    oDestDiv.style.display = "inline";
    if (oSrcDiv != oDestDiv) {
        oSrcDiv.innerHTML = "";
    }
}
</script>
</head>
<body>
<div id="frmPost" style="display:none">
	<table width="100%" border="1" cellspacing="0" cellpadding="3">
	<tr valign="top">
	<td nowrap="nowrap"><p><span class="occ_label">
	Post</span></p></td>
	<td><textarea name="txtPost" rows="10" cols="20" id="txtPost" tabindex="5" class="formStretch"></textarea></td></tr>
 
	<tr><td><p>&nbsp;</p></td>
	<td><a href="javascript:InsUpd_ForumPost();" class="occ_LkButton"
		><span id="btnSubmitpost_lblButton">submit</span></a>
	<a href="javascript:cancelPost();" class="occ_LkButton"><span id="btnCancelpost_lblButton">cancel</span></a>
	</td></tr>
	</table>
</div>
<table>
<tr id="tr1"><td id="div1" colspan="2"><p>&nbsp;</p></td></tr>
 
<tr valign="top"><td style="padding-right:20px;">
<p>Jack Collins</td>
<td><a class="occ_evtLink2" href="javascript:addReply('tr1', 'div1', 63);">[reply]</a>
<p>Text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text </td></tr>
 
<tr id="tr2"><td id="div2" colspan="2"><p>&nbsp;</p></td></tr>
 
<tr valign="top"><td style="padding-right:20px;">
<p>Jack Collins</td>
<td><a class="occ_evtLink2" href="javascript:addReply('tr2', 'div2', 63);">[reply]</a>
<p>Text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text </td></tr>
</table>
</body>
</html

Open in new window

0
steveOhum
Asked:
steveOhum
  • 2
1 Solution
 
zeroxpCommented:
i suppose there's an element with id="hdDivFrm" somewhere on the page.

if you set any element to display:inline, then it will not accept/or inherit width or height. So don't set display:inline to the tr and td:
<html><head>
<script language="javascript" type="text/javascript">
function addReply(trID, divID, pID) {
    var oDestDiv = document.getElementById(divID);
    var oDestTr = document.getElementById(trID);
    var oSrcFrm = document.getElementById("frmPost");
    var oSrcDiv;
    if (document.getElementById("hdDivFrm").value == "") {
        oSrcDiv = oSrcFrm;
    } else {
        oSrcDiv = document.getElementById(document.getElementById("hdDivFrm").value);
    }
    document.getElementById("hdDivFrm").value = divID;
    oDestDiv.innerHTML = oSrcDiv.innerHTML;
    //oDestTr.style.display = "inline";
    //oDestDiv.style.display = "inline";
    if (oSrcDiv != oDestDiv) {
        oSrcDiv.innerHTML = "";
    }
}
</script>
</head>
<body>
<input type="text" id="hdDivFrm" value="frmPost" />
<div id="frmPost" style="display:none">
        <table width="100%" border="1" cellspacing="0" cellpadding="3">
        <tr valign="top">
        <td nowrap="nowrap"><p><span class="occ_label">
        Post</span></p></td>
        <td><textarea name="txtPost" rows="10" cols="20" id="txtPost" tabindex="5" class="formStretch"></textarea></td></tr>
 
        <tr><td><p> </p></td>
        <td><a href="javascript:InsUpd_ForumPost();" class="occ_LkButton"
                ><span id="btnSubmitpost_lblButton">submit</span></a>
        <a href="javascript:cancelPost();" class="occ_LkButton"><span id="btnCancelpost_lblButton">cancel</span></a>
        </td></tr>
        </table>
</div>
<table>
<tr id="tr1"><td id="div1" colspan="2"><p> </p></td></tr>
 
<tr valign="top"><td style="padding-right:20px;">
<p>Jack Collins</td>
<td><a class="occ_evtLink2" href="javascript:addReply('tr1', 'div1', 63);">[reply]</a>
<p>Text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text </td></tr>
 
<tr id="tr2"><td id="div2" colspan="2"><p> </p></td></tr>
 
<tr valign="top"><td style="padding-right:20px;">
<p>Jack Collins</td>
<td><a class="occ_evtLink2" href="javascript:addReply('tr2', 'div2', 63);">[reply]</a>
<p>Text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text </td></tr>
</table>
</body>
</html>

Open in new window

0
 
level9wizardCommented:
I recommend removing <table>'s for content style all together. They are very hard to manage and do things like you're trying to do here. Never use tables for layout. The only case to use tables might be for data, but even still they are awkward.

Also, you're missing a doctype. Doctypes help standardize rendering (by having the browser's native rendering mechanisms come last). See:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
0
 
steveOhumAuthor Commented:
Thanks for the solution - I never really knew the difference between 'inline' and 'block', so I guess that clears it up!
0
 
steveOhumAuthor Commented:
Thanks, Level9Wizard, for the tips. I'll definitely consider taking your avice.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now