Enavigo

No matter how much you work with CSS and tricked out positioning, you will have a problem creating a table without actually using one.
See, the problem has to do with height, the bane of most browser design, and drawing the bottom border. You can create a bunch of <div> elements that float right next to each other, you can even draw borders on the sides and everything will appears hunky dory except for the fact that divs do not give a hoot about the aligning their bottom borders. You can be a wiseass and set the div height in the stylesheet, but then your are married to a specific height. If a user puts just a tiny bit too much data, it will not look nice.
So you can use tables. Not for layout, but just to display data in tabular format. No one will die, I will not tell and definitely the CSS god allows that.
Tables are for tables.

So I am creating a vigorously XHTML-Strict compliant layout in template we are providing to a client who is very standards minded. A very good thing, really.
When you validate your XHTML using any of the sites dedicated to that, they all want to know it is an XML file and as such, also would love to know what encoding you are using.
To solve the aforementioned issue, a normal person would add the line:

<?xml version="1.0" encoding="UTF-8"?>

If you do that, a lot of your layout in Internet Explorer 6, will be messed up. Font sizes will be ignored, layout will be ugly, and you will start looking and looking, pulling your hair.

Makes sense, right? No.

At least the beast is aware of it.

The problem:

So I am creating a fancy user interface component with XHTML and JavaScript, what is known by the obscenely vague term DHTML. And it is pretty much a dynamic thing – one of the functional components creates <img>elements which it then proceeds to append to the page’s DOM structure. More fun than fancy, the code looks like this:

// create the element
var legendImageElement = document.createElement("img");
legendImageElement.setAttribute('src', "images/dot.gif");
legendImageElement.setAttribute('height', 20);
legendImageElement.setAttribute('width', 1);
legendImageElement.setAttribute("id", "stick1");
legendImageElement.setAttribute("class", "legendLine");
// get a handle on the div under which the element will be placed
var snapStatusDiv = document.getElementById("slider-container");
// append the element to the div
snapStatusDiv.appendChild(legendImageElement);


This all works in Internet Explorer except for the fact that it does not actually apply the class attribute to the newly created element. but when I try to position these newly created elements, Internet Explorer refuses to do so dynamically using a line like


legendImageElement.style.left = 50px;


The only way I can get Internet Explorer to position the element is to set its class attribute, and do that after the element was actually added to the page. There is no visual lag, but setting a class is much less flexible than actually accessing an element’s positioning.
Worse, if I try to output the dynamically-created-element’s position on the page, all that is returned is an empty string.

I have a couple ideas to go around this limit, but in all, it is either pretty lame or that I just need to dig deeper to find an answer.

The solution to this issue was pretty simple but took time to experiment.
First, after you add the element to the page, you need to get a handle of the actual element using the getElementById() method (which also means that the dynamically created element needs to have its id attribute set).
Once you have a reference to the element, you need to define its style in three steps.
1. theElementRef.style.position = "absolute"; // (coould also be "relative")
2. theElementRef.style.left= "50px";
.. and this works!

The complete code again…

var legendImageElement = document.createElement("img");
legendImageElement.setAttribute('src', "images/dot.gif");
legendImageElement.setAttribute('height', 20);
legendImageElement.setAttribute('width', 1);
legendImageElement.setAttribute("id", "stick1");
var snapStatusDiv = document.getElementById("container");
snapStatusDiv.appendChild(legendImageElement);
var theImage = document.getElementById("stick1");
theImage.style.position = "absolute";
theImage.style.left = "50px";
theImage.style.top = "50px";