Drupal 6, Panel 2 CSS Problem

I am styling a site for a client with extensive background images and jquery nice menus. The style looked great in firefox. However, when I checked with IE and other browsers, I find that there are quite a few of them returns a stripped down version of the site. No images has been left. It sends me 'flying all over the net' to search for a solution, tried different hacks for the quirk mode and box models that are more geared towards to IE 5 and earlier.

Nothing seems made any difference! The normalization in the stylesheet tells me that the box model hack was not necessary. It was just an attempt so that I feel 'maybe' no stone left unturned.

Finally, I checked each page of the site and got a discovery! The pages that are controlled by the page.tpl.php templates looks great in IE 7, the pages that are controlled by panel pages looked horrible. So it was a panel's problem. Other people had experienced the same problems too.

Here is a solution to IE Z-index problem , a drupal page for the discussion of Superfish menu

Anyway, the one simple thing that solved this beast for me is that IE 6, 7 and even 8 has a limitation of size of CSS files, see this blog post and drupal as a clever cms has a function that can aggregates and compresse all the CSS files into a single file. Panels 2 added more CSS to the system that was the root of the problem here. By allow drupal to aggregates the CSS files, the site now looks great on IE.