General browser blues

Well, lately, IE is not the only browser to give me the blues. In fact, all week I've been bitten by browsers handling things differently, often just between versions of browsers.


A page I had worked on used some absolute positioning within relative positioned elements to achieve the proper layout (idea being to position some buttons at the bottom of a box). It worked just fine in IE, Chrome, FF 3+ ... but FF 4 choked. What was the problem? Well, the relative positioned element was a table cell. Apparently, while most newer browsers happily support this, there is no defined behaviour: see W3 for specs. Hence, FF 4 decided that while the table cell could be relative, the absolute positioned elements should be positioned according to some other element. Despite FF 3+ doing things exactly as expected.


IE gave me a good chance to refresh my knowledge of HTTP status codes. While I knew quite well that search engines will use the knowledge of 301s to avoid reindexing pages that have been moved (and also transfer pagerank), I wasn't aware that browsers can (and will) cache HTTP headers. Specifically, IE9 will cache 301 responses. Now, this is actually a good thing, as it'll speed up browsing for users. However, it means that web developers really need to remember their status codes. If you use redirecting for login, logout or handling POST requests to avoid problems with the back button, you need to use a 302, 303 or 307 - 301s might get cached by the browser (which actually meant the logout function didn't work on the site I was working on). In case you're using PHP (like I am) this note on the header() page is good.