IE6 fix for site

Question

Here is the url to the site in question: http://www.katiesamsonlaxfest.com/index.html

The site looks fine in all the browsers except IE6 and below. I would like if possible to find an easy css fix because as you can see the content is not contained within the divs.

Answer 1

There is no "easy fix". You need to address the problems one at a time.

You can add "IE6"-specific CSS by adding things like:

.box {
    margin-left:20px;
    _margin-left:15px; /* this is the ie-specific fix */

}

...etc.

Also, transparency doesn't work with 24-bit PNG files. Use 8-bit. They're only titles, you don't need 24-bit anyways (or just use GIF). This is why your titles have strange boxes around them.

Answer 2

I recommend the YUI CSS Foundation (Reset, Fonts, Grids). I find far less IE issues when building sites this way and often it requires almost no IE fixes/hacks once built and tested in Firefox.

It may take a little effort to learn, but I consider this to be the easiest fix because it almost eliminates the need for IE specific CSS and it saves you time in the long-run.