We have covered this topic briefly in relation to our group mailing lists. However, I wish to use this entry to clearly emphasize a fact about using the mailto attribute. Imagine you have the following piece of HTML:

<a href="mailto:kt@meeho.dk,aj@meeho.dk">Send a mail to Kasper and Anders!</a>

The above will work, since the mailto string only consists of a total of 30 characters. However, if this length exceeds 255 characters, it won’t work in Internet Explorer 7 and if it exceeds 2048 characters, it won’t work in Firefox etc. – the browsers limit the mailto attribute at different lengths and the key point is: they limit how much data, you can put in the tag. So what to do in this case?

In case you’re looking for a solution that enables you to put a whole bunch of e-mail addresses in the mailto attribute of your <a> tag, look no further – it will not work properly on all systems no matter what you do!

Of course, if you are absolutely sure of the fact that your code will only produce a mailto length of, say, 150 characters then fine, go ahead, but otherwise you will run into trouble.

For those of you interested in the rules about the mailto attribute, the RFC about URIs defines no official maximum length. The RFC simply states that “URI producers should use names that conform to the DNS syntax, even when use of DNS is not immediately apparent, and should limit these names to no more than 255 characters in length”.

What we have done in Meeho!™ is to make use of forwarding to a bunch of e-mail addresses in Postfix. This fixes the problem, but it requires in-depth knowledge of Postfix plus, of course, that Postfix is installed and usable in your setup. If needed, we will cover this in a new blog entry.

If you’ve worked with HTML and Safari before, you’re likely to have seen Safari show a kind of blue border box around your input fields. It’s a nice feature, but at certain times you do not want Safari to show the blue borders. Our Meeho!™ Stickies would look questionnable with blue borders around them. Luckily, the solution is simple and looks like this:

textarea.sticky:focus {
outline: none;
}


If you use outline: none; in the focus context of a CSS class, you’ll see the blue border box disappear in Safari – very neat!

If you have ever wondered why all your images alt attributes suddenly aren’t shown anymore in Firefox 3, Chrome, Safari, and Internet Explorer 8, this is caused by the browsers now finally following standards in this context.

The alt attribute (i.e. <img alt=”Picture of a computer” … />) is originally designed for browsers not capable of showing the element that the alt attribute belongs to, which could be an <img> or <input> tag. But for a number of years, Internet Explorer has shown the alt=”…” text as a tool tip confusing many web developers today because their tool tips for navigation buttons etc. arent’ shown anymore.

Luckily, the solution is simple: use the title attribute, and pop!, your tool tips are shown again! You could have

<img src=”hello.gif” alt=”Hello Good Sir!” title=”Hello Good Sir!” />

… working all fine and dandy in Firefox 3, Chrome, Safari, Internet Explorer 8 etc. The below images are examples of me only using the alt attribute and both using the alt and title attribute. Try to hover the cursor above both images: