I used to only test in Windows Live Hotmail using IE as I was resigned to the fact that it never worked properly in Firefox – until now! I finally got hassled into finding a solution for the only issue we had left – a 3 or 4 pixel gap appearing in between all the images.

It turns out the problem is the way the browsers in quirks and standards mode align images to the text baseline – the 3 or 4 pixel gap is there to allow room for the descenders of lowecase letters like “p” and “y” – even if there are no letters in the <td> with the <img> in it.

There are 2 things you can do to resolve the issue – force all the images to be aligned to the bottom of the <td> rather than the default (text baseline):

<img src="something.gif" alt="..." style="vertical-align: bottom;" />

Or you can take the issue out of the rendering engines hands and fool it by making all the images block-level rather than inline:

<img src="something.gif" alt="..." style="display: block;" />

I prefer the second option, but the first one should work fine too! ;)

It’s basically a presentation by Yahoo! JavaScript Architect Douglas Crockford – it’s a couple of years old, but it’s all still pretty much accurate.

It’s a must-see for anyone who doesn’t know much about JavaScript, or more importantly, anyone who thinks they know about it and has cast it aside as a “simple scripting language”. ;)

It’s about 2 hours long so it’s a bit of an investment, but it’s been broken up into 4 half-hour-ish videos for your viewing pleasure.

Enjoy:

Part 1, Part 2, Part 3 and Part 4

Let’s say the url looked like:

www.site.com/2009/1/is-this-a-legit-url?-i-don't-know?

and you wanted to rewrite that to:

www.site.com/2009/1/is-this-a-legit-url-i-dont-know/

You might think the rewrite would be simple, like so:

RewriteRule ^2009/1/is-this-a-legit-url\?-don%27t-know\?/?$ /2009/1/is-this-a-legit-url-i-dont-know/? [R=301,NC,L]

If you run that though, apache will throw a wobbly and tell you that “The requested URL /2009/1/is-this-a-legit-url was not found on this server.”

The reason for this is the server thinks everything after the first “?” is the querystring, so in this case, the apache is looking for a file/folder called “/2009/1/is-this-a-legit-url” and it will pass the querystring through as “-i-don’t-know?”

Of course, the simple solution would be to just match up to the first question mark in the rule, but that might not always be appropriate – e.g. if the string began with a question mark for whatever reason!

We came up with a cunning workaround for this by matching both the request url and the querystring like so:

RewriteCond %{QUERY_STRING} ^-i-don%27t-know\?/?$ [NC]
RewriteRule ^2009/1/is-this-a-legit-url$ /2009/1/is-this-a-legit-url-i-dont-know/? [R=301,NC,L]

Now, if a request like the original one above comes in, the query string will match the rewrite condition, and the requested URL will match the rewrite rule! :)

Note the extra question mark at the end of the rewritten rule “/is-this-a-legit-url-i-dont-know/? [R=301,NC,L]” – you need that in there to stop the server trying to push the original query string through.

Without it, your URL will be redirected to:

www.site.com/2009/1/is-this-a-legit-url-i-dont-know/?-i-don%2527t-know%3f

Unfortunately, using this method does mean that if you have any variable in the query string that you want to push through, you won’t be able to… Chances are though, that if you have 2 question marks, something’s gone wrong anyway, so this fix is better than nothing! ;)

Steve describes 14 rules that make up a ‘best practices for speeding up your website’: http://developer.yahoo.com/performance/rules.html

And there’s also a way to use the Firefox add-in, Firebug in combination with YSlow to analyse your sites based on the 14 rules: http://www.getfirebug.com/ and http://developer.yahoo.com/yslow/

We’ve been planning a css/js cache for a while now, but never got it off the ground, still seems that a few of the other rules could provide a good return on little investment.