There’s a Fly in my Tag Soup

3rd August 2005

After trying to customise a web application using CSS and JavaScript I’m starting to wish browsers had never allowed web developers to get away with writing tag soup. Certainly if the developers of the pages I was trying to modify had been faced with a YSoD each time they produced malformed markup my job would’ve been made a lot easier ;-)

Unfortunately the same web application that performs really excellent email validation also has a few other problems. Some of the text it outputs is very poorly worded and in some cases sections are totally irrelevent. However because almost all of the HTML is generated from within some DLL’s I couldn’t edit any of this directly. So any attempts to clean up the pages had to be done through CSS and JavaScript. It’s form validation also needs a little help but I’ll get to that in a moment…

Given the quality of some of the other code used it certainly came as no surprise to me to discover that the markup was horrible tag soup, with nested tables, poorly chosen class names and incorrectly nested tags all featuring prominently. This obviously makes adding styling and scripting to the pages a little more tricky. In particular the poor use of class names made it very time consuming to apply the styling and certainly limited what was possible with the layout. IE 7 and it’s support for the CSS 2.1 selectors really can’t come soon enough!

However it was the incorrect nesting of tags that caught me out while I was trying to tidy up a little bit of text in a form. My first attempt at a quick fix was to grab the innerHTML of the form tag, modify it with a regular expression and then write it back to the document. However I soon discovered that this wouldn’t work because of the quality of the markup being used.

When I tried to inspect the innerHTML both Opera and Firefox reported it as being empty. Oh dear. Internet Explorer — bless it’s little heart, it does try so hard ;-) — was able to read the innerHTML but when it came to writing it back into the document it caused an “Unknown runtime error”. Not really that useful.

As I mentioned earlier it’s form validation leaves a little to be desired, basically one part of the application validates the user input, but it doesn’t validate as strictly as is required by another part of the application. So when a user signs up they can enter some information which is accepted as valid, however this same value could cause an error later in the application. So while we were waiting for updated DLL files to fix the validation on the server I decided to add some JavaScript to do the same thing in the browser. At which point the malformed markup struck again. Just like Opera and Mozilla couldn’t read the innerHTML from an element that wasn’t correctly nested, neither would getElementsByTagName find any items within the element. JavaScript and CSS really need good quality markup to work with.

Permalink. Posted on 3rd August 2005 in JavaScript.

Comments

There are currently no comments for this item.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening