IE6 Doesn't like my CSS :(

Question

Web site: srstage.d19.us (sorry would only allow one link)

How it looks in IE6: http://img94.imageshack.us/img94/4489/6c1bafd63a9d33b1231bd3d.png

The 4 bugs are marked.

1. no dotted border (on navigation and date badge) (from memory that isn't supported by IE6)
2. sidebar mostly gone
3. comment-meta is blank
4. date badge is moved (positioning bug?)

I hate IE6, however some organisations stupidly use it... :(

Answer 1

Here are some suggestions for you:

Don't use absolute positioning in the date boxes: Use negative margin and floats.

Your sidebar drops below the entries because there's no room for it. There are two mistakes with the boxing (at least): The #container takes all space on the page, and #primary is not inside the container. #primary is floated right but comes after the content on the left. With float=right the right-floated box should be placed before left-floated boxes.

Make your menu's ul as high as the anchors inside it.

Use position=relative for comment meta.

It would be a lot more easiear for you to use a CSS framework which has already solved these problems. For example Blueprint.

Answer 2

Some of these solutions are a bit hacky, but they should solve all of the bugs:

/* Problem 1 */

div#menu ul
{
    line-height: 2;
}

/* Problem 2 */

div#content
{
    margin-right: 0;
}

/* Problem 3 */

.entry-meta
{
    zoom: 1;
}

/* Problem 4 */

.entry-title, .entry-content, .entry-meta
{
    margin-left: 55px;
}

div.post
{
    padding-left: 0;
}

.entry-shortdate
{
    margin: 0;
    top: 20px;
    left: -40px;
}

Answer 3

You may use IE7.JS to make IE6 behave like standard-compliant browsers.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.