Blogger has added a favicon to all blogspot blogs some time ago. I never took the time to create one my self, until today. All the orange B's in my browser tabs where just too annoying.

Update 2005-07-16: a2xm requested a howto. So, here it is. Just create a 16×16px PNG image, put it online and add the following to your head section:

<link rel="shortcut icon" href="URl to your PNG">


Custom Blogger comments form submit listener fixed

I have fixed the custom Blogger comments form. I changed the submit listener because of a bug in it. In the old situation I used addEventListener to set the submit listener:

if (cFrm.addEventListener) {
  cFrm.addEventListener('submit', function(){return cFrmPost()}, false);
} else {
  cFrm.onsubmit = function(){return cFrmPost()};

addEventListener doesn't return the cFrmPost() return value. When you left the name field blank, you would be asked to fill in a name. At the same time the comment was posted as 'Anonymous'. Now I just use:

cFrm.onsubmit = function(){return cFrmPost()};

Thanks to Hinderik for pointing this out.


CSS: clear floats on parent only

Yet again, I had a problem with CSS. For a project I'm working on I've build page with a sidebar that floats right of the main content (the sidebar and the main content are siblings). The main content contains several floating images. I want those images to clear existing floats because I don't want images next to each other.

Problem is that the images appear under the floating sidebar. There is a way to solve it. Just use overflow: auto on the main content. Yes, overflow: auto saved the day again!


CSS menu and overflow auto workaround

Some time ago I wrote about a problem in Firefox 1.0.x when you combine a pure CSS menu followed by overflow: auto content.

Last week I found a simple solution: position the menu absolutely and make sure that it overlaps the content a few pixels. Problem fixed!


Google Toolbar spell checker

The spell checker in the Google Toolbar (beta available for Firefox) is cool! I always check my posts with the Blogger spell checker. The Google Toolbar version easier and faster. Brilliant!


Web Content Accessibility Guidelines 2.0 draft

W3C published the Web Content Accessibility Guidelines 2.0 working draft on 30 June 2005. A few points I'm very pleased with:

Table layouts

1.0 doesn't encourage you to use tables for layout. You can if you like as long if the table makes sense when linearized (1.0: checkpoint 5.3).

2.0 states that structures within the content should be programmatically determinable and that, when content is arranged in a sequence that affects its meaning, that sequence should be programmatically determinable (2.0: 1.3 L1 SC1 / L3 SC1). Something you can't do if you use a table for layout. However, to do this properly there are more semantic elements needed, like the ones described in Web Applications 1.0 working draft.

Non-text elements

1.0 states you have to provide a text equivalent for every non-text element (1.0: checkpoint 1.1).

2.0 is more nuanced. For example: non-text content that is not functional, is not used to convey information, and does not create a specific sensory experience should be implemented such that it can be ignored by assistive technology (2.0: checkpoint 1.1 L1 SC4).

Updated custom Blogger comments form

I have updated custom Blogger comments form: unescaped the data read from cookie, stripped http:// from the URL (Blogger simply adds http:// to the URL regardless if there already was a protocol) and removed mailto: (because it did't work).


HTML coding with jEdit and the XML plugin

I like to code HTML in stead of using a WYSIWYG tool. After using UltraEdit for years I tried jEdit. It is free and (even for a Java program) fast, but what I like most are the plugins.

Big time saver is the XML plugin. I just love the tag completion, close tag insertion and the option to validate your HTML against the DTD.


What's with the clear: both, Blogger.com?

Since a few days Blogger.com has added a div at the beginning and the end of each <$BlogItemBody$>. Prefix:

<div style="clear:both;"></div>


<div style="clear:both; padding-bottom: 0.25em;"></div>

Thanks for messing my blogs up, Blogger.com. There is a way to fix quirks because of this. My <$BlogItemBody$> is inside a <div class="body"> (which is standard I think). The fix is a simple CSS rule:

div.body div {
  display: none;

Update 2005-06-30: You can prevent the extra styled div's by setting the 'Enable float alignment' option to 'No' in your settings. Thanks to Pogenwurst for pointing this out.


Non Javascript friendly way of hiding empty comments in Blogger

This is a simple non Javascript friendly way, or hack if you like, to hide empty comments in Blogger. I know that you can find other ways to do this. I found some that use a CSS rule to hide the comments and then use Javascript to detect and display them. In my version, when Javascript is turned off, comments will be visible.

The trick is to put your comments in any tag with an id attribute, in my case with the value comments. Then, directly after you've opened that tag, you have to insert some Javascript to hide it:

var comments = document.getElementById('comments');
comments.style.display = 'none';

Then you have to insert your comments, in my case a (semantic) definition list. After the comments you'll need to insert some Javascript to detect and show the comments. In my case by finding out if there were any dd tags.

if (comments.getElementsByTagName('dd').length) {
  comments.style.display = 'block';

Update: stupid me. There is a better way to check comments... just use <$BlogItemCommentCount$>.

if (<$BlogItemCommentCount$> > 0) {
  comments.style.display = 'block';