Question

I am trying to make a table-like calendar page, using fixed width and height block level elements. There is an outer container, which sets the width, and the cells get aligned by float: left. It works well in every browser, except in IE6, where the list gets split after the 29th element.

If I make the outside container a bit more wide (by at least 3 pixels) the problem gets fixed in IE6. Because the elements are more than 3 pixels wide, it doesn’t change how the page looks. But I really don’t understand why it happens, and what should I do not to make it happen.

I tried IE7.js, but it didn’t help.

I know IE6 is such a buggy old browser, but while my sites are simple I prefer making them IE6 compatible.

link to the page in question

Answer 1

You can fix it by adding this to the bottom of style.css:

/* IE6 hack */
* html #naptar-list a, * html #naptar-list div {
    width: 77px
}

This works by using the Star HTML hack to feed to only IE6 the declaration width: 77px (1px less than the actual width), which in my testing, fixed the problem: I’m not entirely sure why.