background image meshed up in IE6, fine in firefox

[donnut]

Hello,

I created stylesheets and a template which looks fine in Firefox (v2.0) (www.gentle-vent.nl/cmsms/index.php). However, in IE (6.0) the background image of the #pagewrapper, which is the background of the three columns #navbar, #main and #sidebar, flows partly over the header. Also a gap between the header and the pagewrapper appears.

A second issue is the menu. It is supposed to be a flyout menu that works fine in Firefox, but not in IE6. Maybe the two issue are related (I hope  )

I run the css and html validators of w3, but no error appears.

Thanks for your help.

Erwin

[Dr.CSS]

The link doesn't work...

[donnut]

Sorry, it does work now.

Thanks,
Erwin

[Dr.CSS]

Try the header like this...

div#header {
  width: 1020px;
  height: 115px;    /* adjust according your image size */
  background: #ffffff;
}

[donnut]

It does move things. In FF still oke, in IE the search button moved all the way up. I commented out the search button, but the small (purple) gap stays.

Erwin

[rtkd]

looks fine in IE7 tho

[Dr.CSS]

Purple is from the div#header if you give the header h1 a the same width and take out the call for the div#header altogether it may help...

[donnut]

I solved the problem by adding font-size: 10% to the #header h1 a tag. After commenting out "text-indent: -999em;" I saw that the text, which is moved out of sight normally, had a too big size. After reducing it, IE6 displays it oke.

I'm not sure if this is the correct solution.

Thanks for your help!

Erwin