Member Avatar for kevin wood

i have created a web page which uses iframes to display data and display the titles on my website. the problem that i am having is that in ie6 is is displaying borders and the titles are being displayed properly.

if i want the titles displayed properly then i need to change the size of the iframe which then puts it out in all other browsers.

what is an alternative to an iframe. the titles and content of the page change as the buttons click is this still possible to achieve without the use of iframes.

  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

reported iframe borders and sizing quirks in IE6, and correctly flagged browser rendering differences. For same-origin content a more robust pattern is to stop embedding whole pages with iframes and instead load page fragments into a container element (server-side includes, client-side fetch + template insertion, or a small SPA pattern). That keeps titles, sizing and history under your control and avoids cross-browser iframe oddities. For true cross-origin embeds, keep the iframe but remove its border with CSS/attributes and use window.postMessage for safe communication (iframe docs, postMessage).

A minimal client-side replacement using the Fetch API and innerHTML:

<div id="content"></div>

<script>
function load(url) {
  fetch(url)
    .then(r => r.text())
    .then(html => {
      document.getElementById('content').innerHTML = html;
      history.pushState({url}, '', url);
    })
    .catch(console.error);
}
document.querySelectorAll('.load-btn').forEach(b =>
  b.addEventListener('click', e => load(e.target.dataset.url)));
</script>

Notes: sanitize or only load trusted HTML before using innerHTML (innerHTML). Ensure a standards DOCTYPE to avoid legacy box-model/quirks issues (Quirks Mode). For very old browsers use XHR or a library fallback and update document title/history with the History API as needed.

Recommended Answers

All 2 Replies

Member Avatar for kevin wood

i sorted this out with a bigger iframe. still not sorted out the problem with the border tho.

anyone no of a good tutorial which will help me stop using iframes as ie does not like them (or much else).

Member Avatar for MidiMagic

The real problem is that you can't put size styles (width, height) and nonzero surrounding styles (margin, border. padding) on the same tag. IE renders them in the opposite nesting order to the standard order used by FF and other browsers.

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.