IE not showing a table inside a div

[clivethebadger]

Hi,
I'm constructing some HTML elements dynamically using javascript, the result looks fine in Firefox but IE 6 refuses to show some tables I've got inside Divs.

My code is a bit big so I'll only post the bit in question. Indentation is just for keeping track of where each tag is.

Why does IE behave this way?

Cheers,
Jon

var optionsDiv = document.createElement('div');
	optionsDiv.className = 'ccLayerOptionsOverlayOptions';
	optionsDiv.id = divId;
	//Table with options
	var table = document.createElement('table');
		var opacityTr = document.createElement('tr');
			var opacityLabel = document.createElement('td');
				opacityLabel.innerHTML = '<b>Opacity: </b>';
			var opacityControls = document.createElement('td');
				var opacityValue = document.createElement('input');
					opacityValue.id = opId;
					opacityValue.className = 'opacity';
					opacityValue.type = 'text';
					opacityValue.value = '1.0';
					opacityValue.disabled = true;
				var decOpacity = document.createElement('a');
					decOpacity.title = 'decrease opacity';
					decOpacity.href = "javascript: ChangesClient.Util.changeOpacity(-0.1,ChangesClient.map.getLayer('" + divId + "'),'" + opId + "')";
					var minImg = document.createElement('img');
						minImg.className = 'button';
						minImg.src = ChangesClient._getScriptLocation() + "lib/styles/minus.jpg";
					decOpacity.appendChild(minImg);
				var incOpacity = document.createElement('a');
					incOpacity.title = 'increase opacity';
					incOpacity.href = "javascript: ChangesClient.Util.changeOpacity(0.1,ChangesClient.map.getLayer('" + divId + "'),'" + opId + "')";
					var plusImg = document.createElement('img');
						plusImg.className = 'button';
						plusImg.src = ChangesClient._getScriptLocation() + "lib/styles/plus.jpg";
					incOpacity.appendChild(plusImg);
				opacityControls.appendChild(opacityValue);
				//opacityControls.appendChild(" ");
				opacityControls.appendChild(decOpacity);
				//opacityControls.appendChild(" ");
				opacityControls.appendChild(incOpacity);
			opacityTr.appendChild(opacityLabel);
			opacityTr.appendChild(opacityControls);
		var posTr = document.createElement('tr');
			var posLabel = document.createElement('td');
				posLabel.innerHTML = '<b>Change Position: </b>';
			var posControls = document.createElement('td');
				var posUp = document.createElement('a');
					posUp.title = 'move layer up';
					posUp.href = "javascript: ChangesClient.layerOptionsPanel.changeLayerIndex('" + divId + "',1)";
					posUp.innerHTML = 'up';
				var posDown = document.createElement('a');
					posUp.title = 'move layer down';
					posUp.href = "javascript: ChangesClient.layerOptionsPanel.changeLayerIndex('" + divId + "',-1)";
					posUp.innerHTML = 'down';
				if (layerIndex < maxOverlayIndex) {
					posControls.appendChild(posUp);
					if (layerIndex > minOverlayIndex) {
						//posControls.appendChild(" | ");
						posControls.appendChild(posDown);
					}
				} else if (layerIndex > minOverlayIndex) {
					posControls.appendChild(posDown);
				}
			posTr.appendChild(posLabel);
			posTr.appendChild(posControls);
		table.appendChild(opacityTr);
		table.appendChild(posTr);
	optionsDiv.appendChild(table);

[acoder]

IE for some reason requires the tbody tag. You will need to append the table rows to the tbody which should be appended to the table tag.

[clivethebadger]

Thanks, I should have known that really!

Cheers,
Jon

[acoder]

No problem. You're welcome!