CSS PNG files & Internet Explorer Woes‏

On our children's ministry VBS webpage (http://okotoksefc.ca/VBS/) I designed everything in Firefox and edited via text editor. It checks out in Firefox 3 Beta, Safari (Mac), but once you go into Internet Explorer, things get buggy. It appears to work well in IE6, while IE8 adds extra space above navigation, but in IE7 everything breaks in the #content background. The design I am using comes with two CSS files, including 1 with IE-conditionals.

Files involved:

* http://okotoksefc.ca/VBS/css/style.css
* http://okotoksefc.ca/VBS/css/ie-transparency.css
* TXT file of "index.php" template (http://okotoksefc.ca/VBS/index.txt)
* TXT file of "navigation.php" template in "index.php" (http://okotoksefc.ca/VBS/includes/navigation.txt)
* TXT file of "header.php" template in "index.php" (http://okotoksefc.ca/VBS/includes/header.txt)
* TXT file of "footer.php" template in "index.php" (http://okotoksefc.ca/VBS/includes/footer.txt)

Could you help me fix the following issues:

1. Get this design to work in all browsers, particularly IE6 & IE7. The way it looks in Firefox 3.0 is perfect!
2. The background disappears in IE7 behind the #content area, why does this happen?
3. I lose the "Welcome" text in IE6 completely.
4. My top image is a PNG file, is there a way to (after removing the border) to have the white part of the sign be transparent and have you see the vertical slats of wood from the background? It would make it look more realistic!
5. Do I really need the alternate ie CSS file, or what is it used for?

Any help would be appreciated, as well as WHY you suggest those changes/why IE rendered the file that way!

Kevin

I can't help you with everything, but I have a couple suggestions.

One thing is to make sure your code is valid. w3c.org has a css validator on its site here: http://jigsaw.w3.org/css-validator/
and an html validator here: http://validator.w3.org/.

Issues with pretty much any version of IE are very common, because IE does not like to follow web standards, especially for css. They are "one of those kids who's doin' his own thing". This is likely what the alternate css file is for; to fix the rendering problems that occur in the non-standards compliant IE.

As far as the PNG file for your top image, you can create the image to be transparent using most graphics programs. You would have to open it and edit it again though, changing the white part to transparent. I made a new Header image for you if you want to use it. :)
http://vtwopoint0.com/images/Header.png .
You can see it against the wooden background here:
http://vtwopoint0.com/avalancheranch.html