Empty Text Nodes (And Why They Suck)

Aug 2011

Which issue was it that gave you pause long enough to wish you no longer had to develop for IE?

(And I can ask that question with 99% confidence that it'll resonate because nearly every cross-browser compatibility issue I've ever experienced or helped others work their way around has been IE-related.)

More than likely, if you've had to build a webpage that was to display beautifully across multiple browser platforms, including historic browser versions like IE7, which is still a corporate standard for many businesses, you've run into numerous issues of compatibility.

Enter the empty text node.

empty text nodes

In the image above, the empty text node is the cause of the little hyperlink remainders to the right of the images (circled in red) and appear in IE's Developer Tools outline in greyed, italicized text (as in the bottom of the two images above).

You can open pretty much any page in IE, hit F12 and find empty text nodes littered throughout the code. Now, I am to understand that this page handling issue has been fixed with IE9, but haven't had a chance to test thoroughly yet. Click here for more background information on empty text nodes.

Suffice it to say, it took me several hours to figure out what these were when I first encountered them—why they were appearing, where they were to be found in my code and how to get rid of them. Hopefully this entry will spare someone dealing with the same issue a couple of hours' frustration.

I can't remember an empty text node I've encountered that caused a display issue that wasn't associated with a hyperlink. Furthermore, I most often encounter the issue when hyperlinks take a list form. And the easiest way I've found to resolve the issue in most cases is to simply remove all spaces between your href tag and your img tag, i.e. don't break your lines of code for sake of pretty formatting. Be forewarned: this may make your code difficult to decipher. Deal with it.

In dealing with it, I've been forced myself to deal with a larger, more philosophical quandary: who am I writing code for? I ask myself this at the start of every project. Is someone else going to have to work with my code? Make edits to my code? Or, am I writing code for only another computer?

Nothing gets under my skin more than code that has a million comments, comments splitting up essential code, code that is unnecessary, code that is similar in function but unique in styling. Coders that work with these bad habits seem to be the same who open themselves up to issues like that of empty text nodes, too. I know because I am only now slowly getting away from these habits. I imagine we all have to beat these demons at one point or another.

That said, as your developing is developing, keep these points in mind and you'll end up fine:

  • Keep your code as concise as possible while maintaining readability
  • Don't repeat yourself (D.R.Y.)
  • Use comments wisely, make sure they're truthful, remove code that's been commented out
  • Make sure to test, then re-test, then TEST AGAIN!
👋 Hi, I'm Chase
profile picture

I work at Verilogue, a medical marketing research company, as part of a rock star development team.

I enjoy writing about web design, and throughout this site share my experience as a front end developer working at the intersection of Big Data and Big Pharma.

In my spare time I like to compose music, which I link to from the playground along with all of my other side projects. I also spend a lot of time reading, mostly about web design and user experience with the occasional book on string theory or building time machines. Beyond that, I enjoy traveling, cooking, and playing World of Warcraft, where I main a Fire Mage named Wildford.

I grew up in Harrisburg, PA and graduated from Temple University in 2007 with a bachelor’s degree in Advertising and a minor in Sociology.

To learn more about me, check out my resume or let's talk on X.