Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

css Safari/Firefox problem with td innerHTML move

Posted on 2009-03-29
4
Medium Priority
?
1,212 Views
Last Modified: 2013-12-07
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
Comment
Question by:steveOhum
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 5

Accepted Solution

by:
zeroxp earned 2000 total points
ID: 24016173
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
 
LVL 11

Expert Comment

by:level9wizard
ID: 24017989
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
 

Author Closing Comment

by:steveOhum
ID: 31564177
Thanks for the solution - I never really knew the difference between 'inline' and 'block', so I guess that clears it up!
0
 

Author Comment

by:steveOhum
ID: 24020865
Thanks, Level9Wizard, for the tips. I'll definitely consider taking your avice.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question