Member Avatar for lauramclean

I have just about had a melt down tonight!
A very good client of mine has their site distorted due to the IE7 inablity to read the iFrame within their site.
The site worked fine in Ie6.
The site uses iFrames to show off some of their goods found in their store.
Has anyone found a way to make these things work?
The site is written in CSS with iFrames added in. The site was developed using Expression Web.
To view please visit http://www.urbanescapeinc.comI want to address this BEFORE they become aware of the issue as good customer relations.
Thanks in advance.
PS I did do the Security Setting change and still nothing changed.
Thanks,

  • 2 Contributors
  • 6 Replies
  • 129 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good catch by and good pointer from — when an iframe seems to misbehave it’s often the container or the page mode, not the iframe itself. IE6 and IE7 handle invalid markup and layout rules differently, so a small CSS/doctype issue (or a stray byte before the doctype from a WYSIWYG export) can flip rendering and break what looked fine in IE6.

A focused troubleshooting checklist and quick fixes:

  • Make sure the doctype is the very first line of the document. The simplest modern choice is:
    <!DOCTYPE html>
  • If testing in IE, put this in the head as a temporary diagnostic to avoid old-compat quirks:
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • Contain floats and force layout in IE6/7 with targeted CSS. A minimal, safe change:
    .header {
zoom: 1;           /* triggers hasLayout in IE6/7 */
overflow: hidden;  /* contains floats and prevents collapse */
}
  • Give iframes explicit width/height and set display:block; border:0; so they don’t introduce inline-box quirks.

Why this happens and how to verify: different IE versions enter quirks or standards mode based on the doctype and any bytes/comments that precede it. Check the rendering mode in the browser console via document.compatMode (returns CSS1Compat for standards mode). More background on quirks vs standards is useful: see the MDN note on quirks mode and standards mode (https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_standards_mode) and the Document.compatMode property (https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode).

Prevention: validate markup, avoid leaving editor-added prologs or comments before the doctype, give key containers explicit sizing or layout triggers, and test in multiple engines (or use conditional CSS for old IE). These steps prevent a header/container bug from masquerading as an iframe problem.

Recommended Answers

All 6 Replies

Member Avatar for lauramclean

It's funny how after you sleep on something it just comes to you. The issue was not around the iFrames at all. It was within the CSS in the space alloted for the header. All is working as it should.

Member Avatar for MidiMagic

You should still be having trouble. Frames are deprecated in XHTML, which is the doctype you chose.

Member Avatar for lauramclean

I know that is the very strange part. The pages now look as they do in IE 6. i can't explain it and I'm keeping my fingers crossed.

Member Avatar for MidiMagic

Your browser dropped into quirks mode because the content violated the doctype. It is no longer rendering XHTML on the page.

Use the W3C validator found here:

http://validator.w3.org/

Member Avatar for lauramclean

Thank you for the link. I used a pre-set CSS style sheet and obviously overlooked the simplest reason. But then the question - why did it display properly in IE 6 with these unvalidated areas?

Member Avatar for MidiMagic

IE6's quirks mode is different from IE7's.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.