Firefox can not layout nested tables properly? - javascript

I want to implement a collapsible menu. I plan to use table component to simulate a menu, and nest a sub table into a table cell to simulate a sub menu.
Below is my code, it works as expected in IE, Chrome and Safari, but it doesn't work well in Firefox:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
It seems that Firefox think the "left" and "top" attribute for the level 3 menu is relative to the level 1 menu, so it layout the level 3 menu incorrectly. Other browsers will calculate the offset base on the level 2 menu, that works as expected.
Is it a bug in Firefox? If so how can I work around it? I want my code to have the same behavior in all major browsers.

Wrapping tables in divs seems to solve the issue:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<div style="position:absolute; left:200px; top:60px; z-index:1">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<div style="position:absolute; left:200px; top:30px; z-index:1;">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div>
</td>
</tr>
</table>
</div>
</body>
</html>
In fact it would be better not to use tables at all, but only divs with proper borders.

It is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=63895 .

Related

HTML tags get changed when assigning to innerHTML

I have an XML and i m transforming it to HTML using XSL. My transformation is successful and i am geting the resultant string like below :- `
<TABLE xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xslscript="http://mycompany.com/mynamespace" border="0" width="100%">
<TR align="center">
<TD>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<FORM action="jhk" method="get" id="frmMain" name="frmMain">
<TR>
<TD class="tableBg">
<TABLE border="0" cellspacing="1" cellpadding="3" width="100%">
<TR class="mainListRow">
<TD colspan="7">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD class="ListTableTitle" width="12%" nowrap="nowrap">Select Value </TD>
</TR>
</TABLE>
</TD>
</TR>
<TR width="100%">
<TD valign="top" width="100%">
<DIV id="listing" width="100%">
<input type="hidden" id="keyField" value="partnerCd"/>
<TABLE STYLE="background-color:white" id="tblList" border="0" bordercolor="#0099CC" cellspacing="0" width="100%">
</THEAD>
<tr>
<TD align="center" width="8px" height="10px"/>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" class="text" name="searchFields" value=""/></td>
</tr>
</table>
</TD>
<TD colspan="1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td/>
<td align="right"><input type="button" class="buttonsNewCancelDeleteClose" id="buttonsSearchId" name="buttonsSearch" value="Search" onclick="searchPaginated()"/></td>
</tr>
</table>
</TD>
</tr>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr class="tableFooter">
<td class="tableFooter" align="left" width="10%"/>
<TD class="tableFooter" id="tableFooter" width="90%" align="right"/>
</tr>
</table>
</td>
</TR>
</FORM>
</TABLE>
</TD>
</TR>
</TABLE>
`
then i am assigning it to the innerHTML of Document..
but the form tag is closing in the same line after assignment. like below
<FORM action="jhk" method="get" id="frmMain" name="frmMain"></FORM>
Not able to understand why the tags are rallying.Can anyone please help .I am not able to find any missmatch.
thanks
A <form> can not be inside a <table>.
Either place it around the <table> or in a <td>
In addition, you have a stray </THEAD> tag on line 24 of your sample HTML. This stray tag results in invalid markup, which could be causing the symptoms you're seeing.

Remove all images from a table and insert it before

I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.
You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO
I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.
Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!
You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>

Mailchimp template issue while using repeatable blocks

I have created form template in Mailchimp, I have been through the documentation and using all the Mailchimp tags respectively its even showing me the icons to drag/ movable content editable etc.
Whenever I edit the content its visible through the campaign test area but when i copy the block and change the positioning, it changes its position in the backend but do not show any changes on the campaign test area.
Here is some piece of the html i am using, i have checked the html for issue but i am unable to find any issues.
<tr mc:repeatable="ntwologo" mc:variant="new-layout-twologo">
<td mc:hideable align="center" valign="top" class="fix-box">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!-- start layout-3 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" bgcolor="#ffffff" style="background-color: #ffffff; ">
<tr>
<td valign="top">
<!-- start layout-3 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width" bgcolor="#ffffff" style="background-color:#ffffff;">
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<!-- start image content -->
<tr>
<td valign="top" width="100%">
<table class="full-width">
<tr>
<td>
<div class="heading" style="margin-bottom:20px;" mc:edit="text heading">
Most Active Canadian
</div>
</td>
</tr>
<tr>
<td class="twologos">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/dceb568a-6e4c-48b8-a2b7-1db04b6780d8.jpg" mc:edit="layoutleftlogo">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/f1eb0308-e0ad-4f6e-b15c-e5583f72a4cf.jpg" mc:edit="layoutrightlogo">
</td>
</tr>
<tr>
<td>
<div class="yaletext" mc:edit="text content">
<!-- text here -->
<br>
Read More
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end image content -->
</table>
<!-- end layout-3 container width 560px -->
</td>
</tr>
</table>
<!-- end layout-3 container width 600px -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END LAYOUT-3 -->

Jquery apending <tr> to table closing the <tr> tag unexpectedly [duplicate]

This question already has answers here:
jQuery appended table adds closing tag at the end of the text automatically. Why?
(4 answers)
Closed 9 years ago.
I am using jquery append method to add <tr> inside the <tbody>. I have to get the following table structure
<table>
<tbody>
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
<td>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"></td>
<td width="4%">:</td>
<td width="63%"></td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I have to add a class to <tr> and inside its contents dynamically. And i am doing it via jquery append method.
But the problem is that when appending the <tr> after appending the first <td> the <tr> is getting closed. I need to insert three <td> inside <tr> and close that. So what's wrong with this code?
With .append() you're not adding tags, you're adding DOM objects. What you want to do is then append the <td>s to the newly created <tr>, like so:
var tr = $('<tr>');
// Add the row to the table
$('table tbody').append(tr);
// Add cells to the new row
tr.append('<td>1</td>');
tr.append('<td>2</td>');
tr.append('<td>3</td>');
$('#tb tbody tr').first().append(' <td> add td </td>');
$('#tb tbody').append('<tr><td> add tr </td></tr>');

Table height not 100% in IE7 but it works in FF3.6

In this page, the height of the payment method area is shorter than the height of the parent element in IE7.
How can I fix this Do I have to apply shading to the parent element - a table cell - instead of the table?
This is the page:
https://checkout.netsuite.com/s.nl?c=659197&sc=4&whence=
This is the login info:
email: test2#gmail.com
pass: test03
Here is the relevant row of HTML (the table structure is controlled by the hosting/CMS provider so I can only change it with javascript):
<tr>
<td width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="shippingmethodtable">
<tbody><tr>
<td class="smalltext"><b>Shipping Method</b></td>
</tr>
<tr>
<td class="smalltext">
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr><td class="smalltext">shipping methods are listed in here</td></tr>
<input type="hidden" value="T" name="continueclicked">
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td width="50%">
<table cellspacing="0" cellpadding="0" border="0" id="paymentmethodtable">
<tbody><tr>
<td class="smalltext"><b>Payment Method</b></td>
</tr>
<tr>
<td class="smalltext">(none selected)</td>
</tr>
</tbody></table>
</td>
</tr>
'
This is the relevant CSS:
body.checkout #submitordertable td {
height:100%;
}
body.checkout #shippingaddress, body.checkout #billingaddress, body.checkout #shippingmethodtable, body.checkout #paymentmethodtable {
height:100%;
width:100%;
}
Try adding:
position: fixed;
in your style definition.

Categories