It didn't work, unfortunately. But I found a similar layout made by grrliz, and she used

position: absolute;bottom: 0px;left: 0px;padding: 0px;

This solved the problem, but - of course - there is a new problem. Everything looks just fine in IE7, opera and ff, but the nav-links don't work in opera anymore... I googled a bit, and it seems opera doesn't like position: absolute; very much. But I haven't been able to find a solution for it so far.

Why didn't it work in IE? I have no idea... But I've played a bit more with the code and removed, among other things, position: absolute; and tried again with position: relative; in #headerand in ul.nav. Now the nav bar looks fine and also works in all three browsers BUT the header is larger in IE7, for some strange reason (which is why we see a white background beneath the red image). I mean, #header height is 250px, nav-bar line height is 50px and the image's height is 200px - everything should fit just perfectly. But it doesn't...

ETA: I take it back, nav bar looked fine in IE on linux, but in windows IE7 I have pretty much the same problem as described in my initial post. *sigh*

The last line is the really important one (no pun intended) because I've noticed that IE sometimes inserts extra margin above the nav links because of this empty div with 0px width. I've checked it on IE7 and FF, and it looks exactly the same. If something isn't right with Opera, I have no idea why.

OMG, it works!! And in Opera too!! And good thing I checked my mail again before I hit the "post comment" button to send you a looong explanation of my recent changes - which, of course, still didn't work LOL God, this extra margin was driving me crazy... And Opera is usually not the problem, it's just seems to have trouble with position: absolute;, for whatever reasons.

I made myself a new journal layout and everything looks just how I want it, but then I went and tested it in IE7 and the header image is for some reason much darker in IE7. The image is supposed to blend in with the rest of the page's background... *sigh* Works just fine in firefox/opera

Is there an explanation for this, and is it possible to do something about it?

Looks like there are problems with IE7's PNG rendering. I found this thread after searching for "IE7 PNG render". I'm not sure I can be of more help, other than the advice in that thread to switch to JPG.

I've played a bit with my journal layout - again - and stumbled across a problem in IE7 - again. IE7 does not show the (sidebar) header background in #header{} (pink dot) and in .widget-header {} (green dot). Why? Works just fine in Firefox/3.0b5 and Opera 9.27.

Hope you can help me! :)

ETA: I've changed the image format from png to jpg in case that caused the problem for some reason, but it doesn't make any difference.

ETA 2: !important in background: url(http://myimage.png) top left repeat-x !important; did the trick in the sidebar.

I also moved the header background from #header{} to #header-inner{}, and the background I had in #header-inner to ul.nav{}. Solved the problem in the header.