Member Avatar for Mapper99

I have a simple web page. Looks great in Firefox and Chrome. I can't figure out what is happening when viewing this page in IE! Anyone have this problem? Here is the page for review:

http://www.laudontech.com/office-floor-plans/

Thanks in advance,

M

  • 3 Contributors
  • 2 Replies
  • 129 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by laura_ci

Dani AI

Generated

reported layout break in Internet Explorer while and saw it rendering fine in IE7/IE8 (with only a tiny problem in IE6). That pattern strongly points to either an older-IE bug (IE6/IE7 hasLayout, double-margin, float containment) or the page being forced into Compatibility/Quirks mode rather than a general cross-browser CSS error.

First things to check: the document mode and whether IE is in Compatibility View. In IE8+ press F12 and verify both Browser Mode and Document Mode show a standards mode (not Quirks). A missing or wrong DOCTYPE will trigger quirks; see Quirks Mode and Standards Mode. Forcing modern rendering can help during diagnosis:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Place that near the top of the head (before other scripts/styles).

Quick, practical fixes that resolve most IE-only layout breaks:

  • Contain floats: add overflow:auto (or a clearfix) to the parent, or ensure the parent has layout in old IE.
  • Fix IE double-margin on floats: set display:inline on the floated element.
  • Trigger hasLayout in IE6/7 with zoom:1 on the element that misbehaves.

Example CSS patterns:

.parent {
  overflow: auto; /* contains floats; test for unwanted scrollbars */
  zoom: 1;        /* fixes many old-IE bugs */
}

.floated {
  float: left;
  display: inline; /* prevents double-margin bug in IE6/7 */
}

If the problem is truly IE6-only, consider an IE-specific stylesheet via conditional comments:

<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6-fixes.css">
<![endif]-->

Validate the HTML/CSS with the W3C validator and check for stray tags or missing closing elements—those often break older IE. If the site must support legacy IE, target fixes only where needed; otherwise consider dropping IE6 support or encouraging users to upgrade.

Recommended Answers

All 2 Replies

Member Avatar for wmsigler

Looks the same to me in IE8 and Firefox 3 (Windows XP). It might even look better in IE8, from what I see. The only real difference I noticed is the default positioning, but I don't see this being a big deal.

Member Avatar for laura_ci

Yep me too. Using Windows XP and it looks fine in Firefox and IE8 and IE7. Only starts to mess up a tiny bit in IE6. What version of IE are you using and what OS?

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.