What's up with my site in IE6

Man, I wish I didn’t have to support IE6 any more.

If you have access to IE6, pull up my site:

http://www.tiltedsymmetry.com/

Check out the upper right main article on the home page, with the blue background. On every machine that I’ve pulled it up on with IE6, the article previews below it are creeping up into the main articles space. I’ve racked my brain over the CSS, and can’t figure out what’s causing this problem. I ran the home page through validation, and although it doesn’t validate, it’s mainly due to some invalid characters in a URL under the Destinations section; other than that, it’s pretty clean.

If anyone has a moment and can help me out with some suggestions, I would certainly appreciate a helping hand.

Ouch! That looks like the guillotine bug (check positioniseverything.net for more info).

(Edit: I could be wrong on that on second glance, but it may be related

I don’t have time to look at the code right now, but I’ll have a look this afternoon.

Jon

I appreciate you taking the time. I’ll check out that bug.

Actually, the guillotine bug was a complete red herring... although it was probably what was causing the bizarre vanishing background behaviour on that first article below the blue box.

I think the real culprit was the negative top margin on your "clearer" div. IE6 has issues with negative margins (again PIE has some examples - http://www.positioniseverything.net/explorer/border-chaos.html) and the easiest working solution is simply to get rid of it - add the following to your ie.css:

.article .clearer {
margin-top: 0;
}

Of course, you then have problems with the box being somewhat larger than intended - which breaks your design a bit. You may be able to get around that by whipping up some more code for the IE version of the CSS.

I hope that helps to the point where you can find a usable solution - does anyone else have any opinions?

Jon

It looks like changing that negative margin did the trick. Thanks so much for taking time out. I owe you one.

No worries - I’m between jobs at the moment so I’ve got the time to help!

Jon

Quote from: jlivingston at Jul 10, 2007, 08:22 AM

It looks like changing that negative margin did the trick. Thanks so much for taking time out. I owe you one.

I’m afraid you’re still not quite there. I get a scroll bar at the bottom even though all the content is visible without scrolling right. There’s an area of blank space to the right of your content. I’m viewing at 1024 x 768 on a 21" monitor with IE6.

In Opera and Netscape, your photo on the right extends well past the right side of the blue background.

I consider 3-column CSS to be a black art -- good luck.

Bob

Because not to use the solution of Dean Edwards and to forget hacks for IE?

Hope this help,
Ramon