image breaking

[hacker9801]

Hello.

I'm using JS/DOM to create a map in a <div>, named map, like this:

var tile = document.createElement("IMG");
tile.src = "tiles/" + node.getAttribute("type");
tile.setAttribute("width", "32");
tile.setAttribute("height", "32");
tile.className = "brick";
map.appendChild(tile);

It works, but the image breaks on a <br/>
(screenshot: http://i28.tinypic.com/6ynu3o.png)
the image is a 32x32 tile of grass.

It shouldn't have those breaks.

I've tried

map.innerHTML = "<img src=\"tiles/grass.gif\" width=\"32\" height=\"32\" class=\"brick\">";

also, same thing.

Any ideas?

[hacker9801]

anyone?!

[hacker9801]

come on, someone has to know

way to not deliver. you fail.

[ShawnCplus]

Why would you create multiple instances of the same image with DOM manipulation instead of just setting the background image on the div with css which will automatically tile the image?

[hacker9801]

Why would you create multiple instances of the same image with DOM manipulation instead of just setting the background image on the div with css which will automatically tile the image?

because it's an XML map, it can have different images. ;)

[ShawnCplus]

Well, that's a detail you did not expound upon. Also showing us an entire page instead of 5 lines of code would help. It's a bit hard to debug an image.

[hacker9801]

Okay, so I'm parsing the map file, looping through the nodes, and adding an image based on the XML file:

for(var i=0;i<map_node.childNodes.length;i++) {
                var node = map_node.childNodes[i];
                if(typeof node.tagName == "undefined") continue;

                if(node.tagName == "tile") {
                    var tile = document.createElement("IMG");
                    tile.src = "tiles/" + node.getAttribute("type");
                    tile.setAttribute("width", "32");
                    tile.setAttribute("height", "32");
                    tile.className = "brick";
                    map.appendChild(tile);
                }

                if(node.tagName == "br") map.appendChild(document.createElement("BR"));
                }
        }

"map" is blanked, then that code executes & adds those images.

I still see no reason for it to break.

[hacker9801]

bump.

[hacker9801]

bumppp

oh screw it you guys suck