[nova912]

Well what im doing i appending a table to a <div> with multiple tables inside of it already. Now it's working fine on FireFox and Safari, but when i add a table in IE i get this little annoying querk, it looks like the table i added has an invisible 2 to 3 pixel border or padding around it. I have tried to use nagitive margins but it only effects the tables veritcal margin and i dont think it's the solution to this problem.

This is the DIV when the page loads. The class "fullWidth" = 100% width.

Code:

<div id="searchCriteria">	
	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="additionalCriteria1">
		<tr>
			<td><?php echo $menu['search_type']; ?></td>
		</tr>
		<tr>
			<td><input class="fullWidth" type="text" name="basic_input" value="" size="24"></td>
		</tr>
	</table>
</div>

This is how i construct and add another table below it.

Code:

			// BUILD TABLE
			var table = document.createElement('table')
			table.setAttribute("cellspacing", "0");
			table.setAttribute("cellpadding", "0");
			table.setAttribute("border", "0");
			table.width = '100%';
			table.id = 'additionalCriteria' + (hiddenInput('num') + 1);
			
			// BUILD ROWS
			var tableBody = document.createElement('TBODY');
			var tableRow1 = document.createElement('tr');
			var tableRow1Data = document.createElement('td');
			var tableRow2 = document.createElement('tr');
			var tableRow2Data = document.createElement('td');
						
			// CONSTRUCT TABLE
			table.appendChild(tableBody);
			tableBody.appendChild(tableRow1);
			tableRow1.appendChild(tableRow1Data);
			tableRow1Data.appendChild(menu);
			tableBody.appendChild(tableRow2);
			tableRow2.appendChild(tableRow2Data);
			tableRow2Data.appendChild(textBox);
			
			// ADD TABLE
			document.getElementById('searchCriteria').appendChild(table);

I think i have created a clone of the default TABLE already in the DIV but for some reason that does not seem to be the case. I for the life of me am unable to find the detail i am missing. I need a bone thrown my way please =X

[jfulton]

Since it is only affecting IE, it sounds like a box model problem...the padding issue might be on the 'container' div. What kind of css styles are being applied to the div #searchCriteria? If you have the DOM Inspector installed in Firefox, see what that says about the javascript generated tables too...

Check out this link and try playing with your doctype to see how that changes things.

[TwoD]

Yes, this is probably a CSS issue.
Post a link to a page where the problem can be seen and I'll move this to the CSS section.

It might also be helpful if you take the code generated by the script and put it on a 'pre-rendered' page. Then it would be easier to debug the CSS since you could modify the source directly without changing the script.

[mab]

This is not a comment about the problem in this thread - sad to say, but the CSS forum should be renamed "display problem (does not work the same in all browsers)" as that is what the title of most of the threads are. LOL

[nova912]

Originally Posted by mab

This is not a comment about the problem in this thread - sad to say, but the CSS forum should be renamed "display problem (does not work the same in all browsers)" as that is what the title of most of the threads are. LOL

Good point, well i put this in the Javascript forum b/c i was using JS to add it to a div, and the same styles are applied to the tables, so i figured it was a DOM issue. Ill try and adapt this script to an example page for you in a few minuets.

Well its not done yet of course but here is the primitive example of it.
http://www.authenticdesign.net/adcsm/ticket_view.php

[nova912]

Here is what i got from the DOM inspector (it's attached), what i notice right off the bat is that there are random [object Text] all over the document.. and its value is like "[random number of white spaces]", could this be what is causing this? Thank for your help.

[nova912]

AHHHHHHHHHHHHHHHH HAAAAAAAAAAAAAAA!!!!!! friggin found it.

Code:

table.cellSpacing = '0';
table.cellPadding = '0';

setAttribute does not work in IE when you use

setAttribute("cellpadding", "0"); or setAttribute("cellspacing", "0");

BUT it does work in FireFox and Safari... gotta love it haha.