However, it doesn't show up in IE 6 (I don't know about its predecessor). If I hide the positioning rule in the #cari it appears in IE. But, I need that rule. I tried using z-index, nothing happens either.
I don't have any experience with z-index so far so I can't say if it has any effect in correctly rendering under IE. But try switching the markup so that your form appears before your header. It might help.
I see you have your searchbox div positioned absolutely. Will moving that div just before your <div id="header"> do the trick ?
Also as a tip: I often use a temporary background color (#ffeaea - pink stands out ) for certain divs to see how they align and where exactly are they if for some reason part of their content is hidden by another element. After correction have been made I remove the background color
I tried to move it elsewhere. Apparently, moving it before the "menu" div solves the problem. After the "menu" div it will still invinsible.
Even though this solves the problem, say, I want to stick with the previous markup, what is happening with IE when interpreting the CSS? Is this a bug?
Anyways, I think the problem is solved but the curiosity still stays.
PS: Background didn't show up in IE as I predicted ;-) I did an exravagant effort by setting the border to 100px as well and it still missing.