createElement('div') into HTML table problem in IE 6.

markszlazak · May 22, 2008

Firefix works fine but I'm having a problem inserting a DIV into a
HTML table cell dynamically with IE 6. The following code has a two
cell table with one DIV hard-coded into the first (top) cell and a
second DIV put in via Javascript. The second DIV shows up like the
first in Firefox. However, in IE 6, only the text within the second
DIV shows but the DIV's style and positioning are lost. What is the
problem?

<html>
<head>
<style>
.grid {
}
.gridRow {
height:30;
}
.gridCell {
background-color:lightyellow;
width:50;
}

</style>
</head>
<body>
<table id='grid1' class='grid' border='1' cellpadding='0'
cellspacing='0'>
<tr class='gridRow'>
<td class='gridCell'>
<div
style= 'position:relative;
background-color:lightgrey;
border-width:1px;
border-color:black;
border-style:solid;
margin:0px;
padding:0px;
visibility:visible;
top:0;
left:10;
height:13;
width:28;
text-align:center;
font-size:10;
font-family:sans-serif;'

DIV</div>

</td>
</tr>
<tr class='gridRow'>
<td class='gridCell'></td>
</tr>
</table>
<script>
var grid = document.getElementById('grid1'),
cells = grid.getElementsByTagName('td');

var divStyle = 'position:relative; ' +
'background-color:lightgrey; ' +
'border-width:1px; ' +
'border-color:black; ' +
'border-style:solid; ' +
'margin:0px; ' +
'padding:0px; ' +
'visibility:visible; ' +
'top:0; ' +
'left:10; ' +
'height:13; ' +
'width:28; ' +
'text-align:center; ' +
'font-size:10; ' +
'font-family:sans-serif;';

function addCellDIV(el) {
var d = document.createElement('div');
d.setAttribute('style', divStyle);
d.appendChild(document.createTextNode('DIV'));
el.appendChild(d);
}
addCellDIV(cells[1]);

</script>
</body>
</html>

david.karr · May 22, 2008

Firefix works fine but I'm having a problem inserting a DIV into a
HTML table cell dynamically with IE 6. The following code has a two
cell table with one DIV hard-coded into the first (top) cell and a
second DIV put in via Javascript. The second DIV shows up like the
first in Firefox. However, in IE 6, only the text within the second
DIV shows but the DIV's style and positioning are lost. What is the
problem?
[deleted]
d.setAttribute('style', divStyle);

The following appears to be very relevant to this.

http://www.quirksmode.org/bugreport...te_does_not_work_in_IE_when_used_with_th.html

Robin Rattay · May 23, 2008

<html>

No DOCTYPE? Modern HTML documents should have a DOCTYPE to avoid the
trap holes of quirks mode. However, if you do add one, then you'll
need to correct the other errors in your document, otherwise it will
stop working in modern browsers - as it should.

<head>
<style>
.gridRow {
height:30;
}
.gridCell {
background-color:lightyellow;
width:50;
}

You need to validate your CSS (and HTML while you're at it). Length
values in CSS require a measurement unit such as "height: 30px".

And not all browsers may support non-standard color names such as
"lightyellow".

Also if all rows and cells in the table are using the same class, then
you can save some work by dropping the seperate grilRow and gridCell
classes und use a descendant selector:

.grid tr {
height:30px;
}
.grid td {
background-color:#FFFFE0;
width:50px;
}

<div
style= 'position:relative;
background-color:lightgrey;
border-width:1px;
border-color:black;
border-style:solid;
margin:0px;
padding:0px;
visibility:visible;
top:0;
left:10;
height:13;
width:28;
text-align:center;
font-size:10;
font-family:sans-serif;'

It would make sense to move this long list of styles to the
stylesheet, since you're reuseing it anyway.

The border properties can be shortened to "border: 1px solid black"
and the visibility, paddings and margins are all default for DIVs, so
they are probably not needed.

BTW, do you actually know what "position: relative;" does? Do you
really want the DIV to overlap any content (for example the table
border) to the right? If you just want to move the DIV to the right a
simple "margin-left: 10px" would be much better.

var grid = document.getElementById('grid1'),
cells = grid.getElementsByTagName('td');

Have a look at the rows and cells collections in a DOM reference. They
are usually the simpler and more reliable way to reference table
elements:

addCellDIV(grid.rows[0].cells[1]);

d.setAttribute('style', divStyle);

Here is probably your actual problem. setAttribute is very broken in
IE. It's best to avoid it:

d.style = divStyle;

Robin

Thomas 'PointedEars' Lahn · May 23, 2008

Robin said:
No DOCTYPE? Modern HTML documents should have a DOCTYPE to avoid the trap
holes of quirks mode.

DOCTYPE _declaration_

However, if you do add one, then you'll need to correct the other errors
in your document, otherwise it will stop working in modern browsers - as
it should.

It may as well not work now already.

You need to validate your CSS (and HTML while you're at it). Length
values in CSS require a measurement unit such as "height: 30px".

Iff the length is different from 0 (as here).

And not all browsers may support non-standard color names such as ^^^^^^^^^^^^^^^^^^^^^^^^
"lightyellow".

http://www.w3.org/TR/css3-color/#svg-color

You are right about the rest.

BTW, do you actually know what "position: relative;" does? Do you really
want the DIV to overlap any content (for example the table border) to the
right? If you just want to move the DIV to the right a simple
"margin-left: 10px" would be much better.

That moves the left margin of the element's canvas 10px to the right.

Here is probably your actual problem. setAttribute is very broken in IE.
It's best to avoid it:

d.style = divStyle;

It is best to avoid direct assignment to the `style' property, and to use
standards-compliant shortcut style properties instead:

d.style.position = "relative";
d.style.backgroundColor = "lightgrey";
...

Have a look at <http://hsivonen.iki.fi/wannabe/>. You may be looking into
a mirror.

PointedEars

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
HTML Table Issue	1	Aug 29, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Having trouble centering contents of td ?	3	May 2, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022

createElement('div') into HTML table problem in IE 6.

markszlazak

david.karr

Robin Rattay

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads