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

**david.karr** · Jun 27 '08, 07:12 PM

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

On May 22, 1:35 pm, markszla...@gma il.com wrote:

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.

Bug Report: setAttribute does not work when used with the style attribute

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

**Robin Rattay** · Jun 27 '08, 07:12 PM

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

On 22 Mai, 22:35, markszla...@gma il.com wrote:

<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:lightyell ow;
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
"lightyello w".

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:relat ive;
background-color:lightgrey ;
border-width:1px;
border-color:black;
border-style:solid;
margin:0px;
padding:0px;
visibility:visi ble;
top:0;
left:10;
height:13;
width:28;
text-align:center;
font-size:10;
font-family:sans-serif;'

>DIV</div>

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.getEle mentById('grid1 '),
cells = grid.getElement sByTagName('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** · Jun 27 '08, 07:12 PM

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

Robin Rattay wrote:

On 22 Mai, 22:35, markszla...@gma il.com wrote:

><html>

>
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

^^^^^^^^^^^^^^^ ^^^^^^^^^

"lightyello w".

CSS Color Module Level 3

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.

>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;

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

d.style.positio n = "relative";
d.style.backgro undColor = "lightgrey" ;
...

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

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

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

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

Comment

Comment

Comment