The White Space Phenomenon

By | November 6, 2016

As a developer, one of the worst problems to encounter is the white space problem. In recent memory I’ve encountered this 2 times. Once inĀ 2013 when integrating with MYOB, a trailing white space at the end of a variable caused an http 400 error which was a complete mystery at the time.

The second time was a few months ago where a bit of html and css I used to create a nav bar was always a few pixels out and I couldn’t figure out why.

 

It wasn’t until today when a good friend of mine was reviewing some basic html/css principles noticed the effect the white spaces had based on the format. I thought it was something to do with a parent css overriding a child property.

What I had to do was change the html from:

<ul class="nav"><li><a href="http://www.talkcrypto.org/">Home</a></li>
 <li><a href="http://www.talkcrypto.org/blog/">Blog</a></li>
 <li><a href="http://www.talkcrypto.org/index#articles">Articles</a></li>
 <li><a href="http://www.talkcrypto.org/index#books">Books</a></li>
 <li><a href="http://www.talkcrypto.org/index#about">About</a></li></ul> 
</div>

to:

<ul class="nav"><li><a href="http://www.talkcrypto.org/">Home</a></li><li><a href="http://www.talkcrypto.org/blog/">Blog</a></li><li><a href="http://www.talkcrypto.org/index#articles">Articles</a></li><li><a href="http://www.talkcrypto.org/index#books">Books</a></li><li><a href="http://www.talkcrypto.org/index#about">About</a></li></ul> 

That is no spaces whatsoever.

I’ve learnt my lesson in PHP by always making use of trim() but in this instance, it probably would have taken me a million years to figure out and then some.

Summary

The take away here is the importance of understanding fundamentals. All too often nowadays everyone takes short cuts and just wants the job done. Myself included. The result is when a tricky problem is encountered, the require skills to solve the problems are missing. Thanks a bunch Ian. I owe you one!

Leave a Reply

Your email address will not be published. Required fields are marked *