Member Avatar for shredder2794

Hello all,
I have designed a website in HTML5 and CSS3 that looks great in Firefox, Chrome, and Safari but in 2 different versions of Internet Explorer that page looks all distorted.

Here are some of the problems:
The banner items are stacked on top of each-other and the background image isn't showing.
The banner has a blue border around it.
The borders on <article> tags are showing up.
And Everything is not centered anymore.

I don't pretend to be an expert so please cut me some slack.

Thanks,

shredder2794

  • 3 Contributors
  • 2 Replies
  • 123 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by mi.mac.rules

Dani AI

Generated

The symptoms listed — stacked banner elements, missing background image, unexpected borders, and loss of centering — point to a mix of HTML5/compatibility and older-IE CSS handling. was correct to check feature support, and was right to suggest an HTML5 shim; the checklist below gives focused, practical steps to restore layout in legacy IE while preserving modern behavior.

  1. Ensure standards mode. A simple HTML5 doctype is required:

    <!DOCTYPE html>

    Check the page’s Document Mode (F12 developer tools in IE) and any Compatibility View settings; a meta X-UA-Compatible header can force the latest engine if needed.

  2. Register HTML5 elements for old IE. Use a maintained HTML5 shiv (for example, the html5shiv project) and include it early in the head so the browser can create the elements before styles are applied.

  3. Add small CSS fallbacks that older IE needs:

    
article, section, header, footer, nav, aside { display: block; }

a img { border: 0; } / removes blue border on linked images /

.banner, .container { zoom: 1; } / triggers hasLayout in old IE /


4) Centering and backgrounds. Confirm the layout wrapper has an explicit width (e.g. `#page { width: 960px; margin: 0 auto; }`) and verify background URLs are correct. Older IE lacks support for some CSS3 background features (multiple backgrounds, background-size); provide simple fallback rules where necessary.

5) Validation and testing. Run HTML/CSS validation and check feature support on a compatibility chart. Debug with IE’s dev tools (watch for console errors and document mode) and, where needed, deliver a small conditional stylesheet for legacy IE-only fixes.

References: html5shiv (https://github.com/aFarkas/html5shiv), MDN on the `article` element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), W3C validator (https://validator.w3.org/), and Can I Use (https://caniuse.com/).

Recommended Answers

All 2 Replies

Member Avatar for mi.mac.rules

IE sucks for HTML5 and CSS3 (comply to the standards, M$). For the HTML5 problem, try this:

<head>
<!--[if lt IE 9]>
<script src=""></script>
<![endif]-->

...
</head>

for CSS3, there are hacks out there, but they're only hacks until M$ complies with the standards. You can create a less responsive stylesheet for those on IE using normal CSS, but that's just a disjunct experience... it's definitely a problem.

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.