So yesterday we discovered a bug in the Blue Sky Sessions website. I think that I probably introduced it when I was fiddling with getting our contact form looking pretty last week, although I have no idea how as the contact form is not presented with the portfolio where the bug occurred. The bug consisted of the entire layout being shifted to the left hand side of the screen from its normal centered position, quite embarrassing. It only happened in IE, and was only on one of our pages.
Anyhow – I took to looking at the code and found that structurally the template was exactly the same as the other pages, so it should have been centered. I really could not find this bug! Getting frustrated, I asked Barry (my boss / coworker) to have a look at it. After deleting most of the page he noticed that I was missing an HTML DOCTYPE declaration. Yuck.
He put this in and of course (silly me, I should have thought of that…) it worked. The doctype tells the browser how to parse the HTML code, I did not realize that it had actual importance to interpretation so I was not too attentive to it in the past.
An example doctype declaration is:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
So anyway, if you are having goofy HTML bugs then be sure to check out your doctype. An excellent reference for anything HTML is w3schools.