faux column problem

[staypuffinpc]

Hey all, I am trying to create a drop shadow effect on a 2-column layout I have centered on the page, using this hint from ALA. I also made some changes to the page to try and get png graphics to show up in IE. This has somehow resulted in some issues that I can't figure out what is going wrong.

Since I'm not sure which piece of code is messing up, I recommend looking at the page here. If you look at it in FireFox, you can see a couple of issues.
Firefox

1. I can no longer get the banner image to move to the left. I am not sure why I've lost this functionality.
2. Notice that the "container element"—which should span the banner, center content, and right columns completely—only extends about 60px below the banner image.

The frustrating part is that there are other issues in other browsers. In Safari and OmniWeb , for some reason,

1. content that should be in the right column (e.g. "AECT weblogs", "Member Blogs", "TED archives", and "Recent entries") is in the center column.
2. some (not all) of the formatting is not rendering
3. notice that the "content" div does extend all the way to the bottom.

IE has its own problems

1. For some reason, the content in the right column is now too large to be displayed there (it used to look just fine).
2. IE is the only browser that is moving the banner as I asked it to (which I am dubious about, since IE is usually the culprit and not the good kid)

I am baffled as to what is causing which problems and which browser to believe. I don't like to leave my questions so open, but I can't figure out why in the world I can't move my banner and why the container div doesn't span the entire thing it's containing. Any help is appreciated.

[CReatiVe4w3]

There's a lot to look at there... so just from glancing really quickly, I see a few things.

1. Your CSS needs a lot of cleaning up. For instance, you're using margin-right:auto;, margin-left:auto; when you can simply use margin:0 auto; <-- Cleaning up all the code really helps, and reducing file size helps those 28.8ers (damn them). Use 0 instead of 0px... easy stuff like that helps a lot.

2. Your container hasLayout in IE (it's cleared), but it's not cleared in FireFox... you either need to clear the left/right content elements with a footer, or you need to add div#container:after {content:"";display:block;clear:both;height:0;visibility:hidden;}. That will probably remedy a lot of things (I think... I didn't look at what else needs it). Remove the line-height:140%; -- that's only going to cause problems.

3. I see a bunch of #center and other stuff that's not necessary. You need one wrapper, header, left content, right content, and a footer (if you want one).

PM/email me if you need any further help, so I get a wakeup call, and I'll try to give you a hand.

[ray326]

A couple of things noticed by Firebug:

Expected ':' but found '}'. Declaration dropped.styles-site.css (line 80)
document.body has no propertieshttp://www.aect-m... (line 34)