By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,931 Members | 1,541 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,931 IT Pros & Developers. It's quick & easy.

inserting image into table cell using dom distorting

P: n/a
I'm using the following code to create a small table with one column and
two rows. An image goes into the first cell.

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

// create tbody
var b = document.createElement("b");

// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
// put image into cell
var i = document.createElement("IMG");
i.setAttribute("src","pics/one.png");
c.appendChild(i);
r.appendChild(c);
b.appendChild(r);

// add row
var r = document.createElement("TR");
// add cell
c = document.createElement("TD");
// put text into cell
var txt = document.createTextNode("desc of image one");
c.appendChild(txt);
r.appendChild(c);
b.appendChild(r);

// append to doc
t.appendChild(b);
document.body.appendChild(t);

This display fine (correctly?) in MZ but IE stretches the image to fit
the size of the cell. I'm actually picking the image dynamically so I
won't know it's size. Is there a way I can do this without the image
distorting?

Andrew Poulos
Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Andrew Poulos wrote:
I'm using the following code to create a small table with one column and
two rows. An image goes into the first cell.

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";

// create tbody
var b = document.createElement("b");
I think what you really want here is:

var b = document.createElement("tbody");

or do you really want to append your <TR> to a <B> element? :-)
// add row
var r = document.createElement("TR");
// add cell
var c = document.createElement("TD");
c.setAttribute("height","200");
c.style.height = "200";
// put image into cell
var i = document.createElement("IMG");
i.setAttribute("src","pics/one.png");
c.appendChild(i);
r.appendChild(c);
b.appendChild(r);

// add row
var r = document.createElement("TR");
// add cell
c = document.createElement("TD");
// put text into cell
var txt = document.createTextNode("desc of image one");
c.appendChild(txt);
r.appendChild(c);
b.appendChild(r);

// append to doc
t.appendChild(b);
document.body.appendChild(t);
This will not work in Firefox or IE. Use:

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);

This display fine (correctly?) in MZ but IE stretches the image to fit
the size of the cell. I'm actually picking the image dynamically so I
won't know it's size. Is there a way I can do this without the image
distorting?


For me, the image does not distort in either Firefox or IE. If the
image is bigger than the cell or row or table, the cell/row/table is
expanded to fit the image (though that can be overridden with the style
overflow attribute I guess).

Full code:

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "20px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";
// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);

--
Rob
Jul 23 '05 #2

P: n/a
RobG wrote:
[...]
document.body.appendChild(t);

This will not work in Firefox or IE. Use:


Oops, yes it does. However I think it's still better to use the method
I suggest below - any comments?

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);

--
Rob
Jul 23 '05 #3

P: n/a
[snip]

Full code:

//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";
t.style.left = "100px";
t.style.top = "100px";
t.style.width = "200px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
I could be wrong (it happened while I was editing something else and so
I haven't had a chance to test it fully) but if I leave off TBODY
creation the table doesn't get created in IE.
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";
// create image
var i = document.createElement("IMG");
So far all I've change is my line
i.setAttribute("src", "a.gif"); to match your next line and now the
image doesn't distort in IE.
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}
I like the lesser amount of typing with document.body but I'll go back
to 'standards'.
docBody.appendChild(t);


Thanks, I'll let you know the noticeable difference the other changes make.

Andrew Poulos
Jul 23 '05 #4

P: n/a
If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:

var numTables = 4;
for (var i = 0; i<numTables; i++) {
//create table
var t = document.createElement("TABLE");
t.style.position = "absolute"; t.style.left = 100 + i*250 + "px"; t.style.top = "100px";
t.style.width = "200px";
t.style.border = "1px solid red";

// create tbody
var b = document.createElement("tbody");
// create row
var r = document.createElement("TR");
// create cell
var c = document.createElement("TD");
c.style.height = "200";
c.style.border = "1px solid blue";
c.style.textAlign = "center";

// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";

// Append elements
c.appendChild(i); // add image to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// create another row
var r = document.createElement("TR");
// create another cell
c = document.createElement("TD");
c.style.border = "1px solid green";
c.style.textAlign = "center";
// create text node
var txt = document.createTextNode("desc of image one");
c.appendChild(txt); // add text to cell
r.appendChild(c); // add cell to row
b.appendChild(r); // add row to tbody

// append to doc
t.appendChild(b);

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);

}

It's very strange. I've tried it using different images but it keeps
happening.

ANdrew Poulos
Jul 23 '05 #5

P: n/a
Andrew Poulos wrote:
If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:
It should only create one table and image:

var numTables = 4;
for (var i = 0; i<numTables; i++) {
Here you initialise i as a counter for your for loop.
//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";


t.style.left = 100 + i*250 + "px";


And use it here for your buffer between tables (they will overlap if
the image is greater than 250px wide) - which is fine.

[...]
// create image
var i = document.createElement("IMG");
i.src = "a.gif";
i.style.border = "1px solid pink";
BUT... here you re-initialise i as an image element. I can't
understand how IE still only loops 4 times, Safari just barfed after
the first loop.

[...] if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}


I would put this before the for loop - you only need to find the body
reference once.

--
Rob
Jul 23 '05 #6

P: n/a
RobG wrote:
Andrew Poulos wrote:
If I put the code into a loop to create 4 separate tables. In IE, the
first, second and fourth images are not distorted whereas the third
image is:

It should only create one table and image:

var numTables = 4;
for (var i = 0; i<numTables; i++) {


Here you initialise i as a counter for your for loop.
//create table
var t = document.createElement("TABLE");
t.style.position = "absolute";


t.style.left = 100 + i*250 + "px";


And use it here for your buffer between tables (they will overlap if
the image is greater than 250px wide) - which is fine.

[...]
// create image
var i = document.createElement("IMG");
i.src = "a.gif";
I moved the previous line to after
c.appendChild(myimg)
and now it seems to work correctly in IE.
i.style.border = "1px solid pink";
BUT... here you re-initialise i as an image element. I can't
understand how IE still only loops 4 times, Safari just barfed after
the first loop.

[...]


Dang I've been clumsy - it's now 'myimg'. if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

I would put this before the for loop - you only need to find the body
reference once.


Thanks, I've moved it out of the loop.

Though I've got it working now if I move the myimg.src line back to it's
original line position it also works but during testing, after I've run
the file a while, it fails. Once it fails if I move the line and test it
it works. Then if I move the line back it works for a short while again.

I guess this is why people love IE so much.

Andrew Poulos
Jul 23 '05 #7

P: n/a
RobG wrote:
Andrew Poulos wrote:

<snip>
document.body.appendChild(t);


This will not work in Firefox or IE. Use:

if (document.getElementsByTagName) {
var docBody = document.getElementsByTagName("body")[0];
} else if (document.all) {
var docBody = document.all.tags("body")[0];
}

docBody.appendChild(t);

<snip>

The W3C HTML DOM specification defines a "body" property of the
HTMLDocument interface. Like all of the pre-existing features formalised
in the HTML DOM specification, it is very well supported (and obviously
completely 'standard' coding).

Indeed it can easily be argued that using - document.body - is superior
to - document.getElementsByTagName('body')[0] -. It is obviously less
involved to resolve a simple property accessor rather than property
reference, method call with DOM search, collection building and then
collection member referencing. Particularly as the W3C require the
nodeList object returned from getElementsByTagName to be 'live', making
a quite a complex object to be creating and then throwing away within a
single expression.

Richard.
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.