CSS of iFramed page not being applied properly

Question

My company has purchased a third-party package with a built-in customer facing web portal, and I'm being tasked with integrating it into our site. Unfortunately, the web portal does not look great, and we have absolutely no control over how it looks (other than asking the vendor for changes - $$). In order to make it look somewhat like the rest of our site, I've stuck it in an iFrame (I'm not thrilled about this either) to put our logo and top navigation on it.

Please note, I am not attempting to manipulate the iframed page in any way.

Firefox handles this just fine, but in IE7 and IE8, not all of the CSS is being applied properly when the application's pages are displayed in the iFrame. Specifically, it should be applying a font-family of Arial to all TDs, but some text inside TDs are not being displayed as Arial.

Any ideas as to what is going on? This only happens when the pages are viewed inside the iFrame. Outside the iFrame, the CSS is applied as it should be. I'm guessing we're going to have to get our vendor to make some changes, but I'd love to know why the iFrame is impacting the page like this.

Thanks!

Answer 1

Have you opened the site you want to integrate as standalone in IE? Maybe it has nothing to do with the iframe, but with the ie itself. That would mean, that the system your company bought, doesn't provide browser-compability because of lack of CSS-IE-Fixes.

Answer 2

These are some debugging steps you can try:

1. Install the Firebug extension for Firefox. Right-click on an item that looks different and select "Inspect Element". The "Style" tab on the right will show you where styles are coming from.

2. Save the main document into disk (File->Save as->Web page (complete). Start stripping stuff from it until you get a small test-case you can post here. (Alternativelly, you can spider the site into disk with WinHTTrack.)