CSS / IE 6 -- what's the problem?

[inbetweendays]

Okay, I just recently posted here about a website I am currently working on... I just realized today that this page is acting up in IE6. The main image is dropping down below where it should be, and looking funky:

grafiks.org/webs/mhamc/

It looks fine in most other browsers, including IE 7... I'm not sure if I need to add some sort of hack, or if there is another way I can easily fix this. Any ideas, anyone? I'd prefer the latter as opposed to adding a hack, but suggestions are welcome.

Thanks!

[Toon]

You may be better using a seperate style sheet for IE6

[Marc]

It looks as if ie has added padding or margin somewhere and therefore the image/containing div is too wide. If you put a set width on the box1 containing div and then set:

#box1{
overflow:hidden;
}

and

#submenu{
overflow:hidden;
}

That should solve the problem,

[afox]

I noticed in IE6, compared to IE7, FF, Opera, Safari, and a pod of other browser types, that margin sizes are different. For instance, margin-right: 10px in FF makes a right margin of 10px, but in IE6, it makes a margin of something closer to 21. It's weird. I use IF IE 6 clause, very simple and doesn't break validity.

Just put this in your head tags of the page(s) with trouble with whatever new updated directive for IE. (worth with other things besides css as well)

<!--[if IE 6]>
<style>
/* Your updated IE code here */
</style>
<![endif]-->