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
Expand|Select|Wrap|Line Numbers
- 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);