[SOLVED] 1 solved problem causes another

I had a problem with the background of one of my sites. That problom got solved in this thread.
Great, but the solution brought another problem in IE6: it cuts off my menu-items. I attached an image to show what I mean..

how do I solve this one without bringing back the old problem? Is it the way I think; pushing the menu more inward so it doesn't exceed the container on the left? (I hope not )

Thnx in advance again~!

(URL to the preview: http://www.poppen.ca/showcase/commun-art )

In your css, try adding

overflow: visible

to your #container element.

too bad.. it doesn't seem to work

Um ok,

Try removing the negative margin from your menu and making it

position: relative;
left: -25px;

You say this is only IE6 right? I'm trying to remember my old workaround..

Seems like you just remembered. It works!
Thnx mate (Is that really austrailian? )

Hang on. You should not be floating and positioning an element. These properties are mutually exclusive; I believe the positioning will override the floating.

So you may as well remove your { float: left }. It's not doing anything now that you've added {position: relative }.

Note that { position: relative } will leave a space where your element was before. Depending on the rest of your layout, you may be better using { position: absolute } to completely remove the menu from the visual formatting flow, and overlay it in its own positioning context.

This is a little tricky to get your head around. You'd actually need to put the absolutely-positioned menu inside a relatively positioned container.

Of course, if the extra gap doesn't bother you, then there's no need to change anything.

Hmm.. looks you're not exactly right.. With the float: left the layout looks fine, but when I remove it it centers the menu in the content-position for some reason.. I'll just leave it there if you don't mind

How very interesting.

You are in fact correct. More careful reading of the CSS spec. informs me that {position: absolute} and {position: fixed} will force {float: none}, but that {position: relative}
is compatible with floating.

Cool.

By the way, the reason for the unexpected centring is that the floating suppresses normal margins: instead, float margins become "padding" for any inline content that flows around the float. So your auto margin had no effect when float was applied.

It certainly is - LOL, I say it at least once a day

Weird.. I thought the problem was solved, and it is.. in FireFox that is.. IE shows my menu above my content.
Which conditional can I use for IE to fix this?
Open the following link in IE: http://www.commun-art.nl/commun-art/

[edit] Nevermind.. forgot to put "px" behind the width of the #menu *blush*