I’m currently swamped with work and don’t have much time for blogging. But for those of my visitors who do their own HTML and Javascript I thought I share some programming problems I had in the last two days and their solution where I found one.  It might be that these are things should be clear from reading the relevant standards, but I have to admit that I find the standards for HTML and Javascript hard to read and even harder to understand; my usual tactic is to look how others are doing it and follow the majority.

In IE a javascript variable cannot have the same name as a CSS id

Something like

test = document.getElementById('test')

fails reproducibly (is that even a word?) for me.

Solution

is obvious (avoid).

***

In IE ‘cloneNode’ will not clone the selected state of select fields

This is a confirmed IE bug, and if you know what you are looking for you will find it in the MS Knowledge base. But you might hit the problem even if you don’t know what cloneNode means but use one of the many “drop shadow” Javascripts.

Yesterday I had to debug an AJAX script (or so I thought) that powered a few chained select boxes (that is, the possible choices in subsequent boxes narrowed down when you choose an option in the previous). Problem was, IE 7 kept loosing the selected state when the page reloaded. Eventually I realized that this couldn’t be caused by the AJAX script (which fired on the onchange event, not on load) and examined the other scripts in the page. One of them was a drop shadow script, a script that changes the HTML markup in a page to create a shadow effect to an HTML block element.

Now this script, like most drop shadow scripts I know, works by cloning (making a copy of) the element that’s supposed to get the shadow and insert the copy into the markup necessary for the shadow effect. Since the select boxes lay within the element they lost their selected state due to the IE bug.

Solution

Microsoft suggests to store the selected state in a variable and apply it to the cloned Element. I had eight select fields and rather than storing eight values I choose to rework the markup of the page and have a shadow effect without javascript.

Apart from a solution this has also an (somewhat obvious) moral: Never start fixing an error before you are sure what the error actually is.

***

Background position is off by a few pixels on Mac computers.

Despite the fact that I reset margins, paddings etc the position of background images on Mac OS 10.4 differed from the display on Windows; this seems to be an effect of the operating system rather than a browser effect.

Solution

After some trial and error I could fix this for setting a line height for block elements, but not for inline elements – which leads me to the question from the title, are inline elements supposed to respect a line height setting? Propably not, since they don’t form a ‘box’ in the same way block elements do – I think I was misled by the fact that Browsers on Windows displayed the page as expected.

***

Oh well, this blog entry probably wasn’t all that insightful, but to solve these problems took me much longer than necessary and maybe this will help some poor soul who desparatly googles for help on a busy weekend.