I’ve been fighting my new WordPress theme this morning in order to get the darn thing to validate as XHTML 1.0 Transitional – I didn’t aim for Strict as I use the “target=_new” functionality in a lot of existing links which would need to be updated. After fixing a bunch of problems around the place, I finally tracked the last few down to the Twitter widget you can see to the right.
It appears that Twitter’s default coding for the HTML-based widget is a trifle skwiffy. The code offered to me by the site is:
<div id=”twitter_div”&rt;
<h2 class=”sidebar-title”&rt;Twitter Updates</h2&rt;
<a id=”twitter-link” style=”display: block; text-align: right;” href=”http://twitter.com/ghalfacree”&rt;follow me on Twitter</a&rt;</div&rt;
which refuses to validate, showing five errors mostly related to things being in the wrong order. A quick hack-job gave me the following:
<div id=”twitter_div”&rt;
<h2 style=”display: none;”&rt;Twitter Updates</h2&rt;
<a id=”twitter-link” style=”display: block; text-align: right;” href=”http://twitter.com/ghalfacree”&rt;follow me on Twitter</a&rt;</div&rt;
which validates just fine as XHTML 1.0 Transitional. However, this rather ugly bit of cruft crashes Internet Explorer. So, a neater – but rather stupid – hack is below:
<div id=”twitter_div”&rt;
<ul id=”twitter_update_list”&rt;
<li&rt;</li&rt;
</ul&rt;
<a id=”twitter-link” style=”display: block; text-align: right;” href=”http://twitter.com/ghalfacree”&rt;follow me on Twitter</a&rt;</div&rt;
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”&rt;</script&rt;
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/ghalfacree.json?callback=twitterCallback2&count=4″&rt;</script&rt;
That should suffice for now, but I’m not particularly happy with the solution. Still, it validates – which means it can’t be bad.