20 March 2010

Low-level error: jQuery fadeOut fails in FireFox

Another hard-to-debug error (possibly a mistake in jQuery, but might be something in FF as well) is that $().fadeOut may fail to actually hide the element in Firefox. I have come across this when I tried to hide a floated container that was the only thing inside another container. Adding a further sibling element, or removing the float immediately resolved the issue.

Duplicate content bug: text appears twice in IE7 and IE9

The double or duplicate content error is very hard to re-create and to debug. The symptom is that some content (usually text) appears twice on your screen, the second one usually in a margin. The two copies are, in fact, the same: selecting part of either copy will result in a highlight at both(!) places. Quite weird.

This error usually affects IE7 and IE8 in compatibility mode. I have found two things that can cause this:
  • A floated container with block-level content only. Try to put some small inline content into all containers around the affected area. Having no inline content can also cause vertical misalignment in the same browsers.
  • Two HTML comments following each other immediately. This can be tricky to spot, especially if you're using SSI includes.