Why does this page look different between IE, Firefox & Chrome

Question

Take a look at this html page.

In Firefox it looks just like I want it to look, in IE it looks "a bit weird", and in Chrome it's all twisted.

What non-standard HTML I am using that makes it looks so different between browsers? Specifically, how can I fix the Chrome & IE versions to look more like Firefox?

Note that Chrome only goes haywire if all or almost all columns have the yellow stickies. If one or two columns are empty, then Chrome displays the page just like Firefox.

Edit - here is the fixed page.

Answer 1

Try validating your CSS and HTML if possible. That usually helps remove the biggest of glitches.

validator.w3.org

Answer 2

One of the first things I'd have to suggest is making sure that your code is valid if you want cross-browser friendly.

The posted code comes up with 33 errors.

FF isn't quite as picky as some other browsers can be, and gives a lot of leeway in terms of valid code.

Try validating and fixing the problems with validity, then check it again; it might look at least a bit better.

Answer 3

The page doesn't have a DOCTYPE. It is important to have one to tell the browsers that your page is standards compliant. Start from there and ensure your page passes validation for your chosen DOCTYPE.

UPDATE: Good job on fixing the validation! Your problem now is that the table element follows two floated divs without any clearing. You must clear the floated elements so that the following elements are laid out correctly below them.

Try the following. Google "clearfix" for a more elegant solution.

<div style="float:left">....
<div style="float:right">....
<br style="clear:both"/>
<table ....

Answer 4

Float your calendar table to the left