Member Avatar for asuprem

The website I am designing is made up of several div tags. All but one are at width of 1000 pixels. The odd one out has a width of 990 pixels. All divs are centered.

On firefox and chrome, the divs show up centered and the 990 px width div looks the same width as the 100px divs. But on IE, the 990px div shows up as exactly 990px, i.e. the other dis look longer that said div.

What's going on?

I don't know if I can post the code (work policies).

Thanks.

  • 2 Contributors
  • 6 Replies
  • 2K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by asuprem

Dani AI

Generated

the symptom you describe is classic IE running in Quirks/Compatibility Mode. In that mode IE8/IE9 switch to the old IE5 box model where width includes padding and borders. So if your 990px div has 5px left/right padding (or a 5px border), Chrome/Firefox in Standards Mode render the visual width as 990 + 5 + 5 = 1000, so it looks the same as your 1000px divs. IE in Quirks keeps the total at 990, making it appear 10px narrower.

was spot on about using a standards doctype. Two more checks that usually lock IE into the right mode:

  • Make sure IE is not in Compatibility View (IE8 often forces this on intranet sites).
  • In the <head>, add an X-UA-Compatible tag to prefer the latest engine:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Place it before any CSS or scripts.

Quick checklist to verify:

  • In IE9, press F12 and confirm Document Mode is IE9 Standards (not Quirks or IE7).
  • Inspect the computed box for the 990px div: if you rely on side padding/border to reach 1000px visually, keep that consistent across all wrappers. Alternatively, remove side padding from the 990px div so its total width is truly different.
  • Avoid the deprecated <center> tag; centering block elements requires them to be block-level, not floated, and to have an explicit width. Auto margins then do the centering.

If you do want the content box to include padding/border by design, you can use box-sizing: border-box across the layout, but note IE8 does not support it natively, so use with care or provide a fallback.

Recommended Answers

All 6 Replies

Member Avatar for lps

please use html code <center> or CSS margin:auto; to centerize the divs.

Member Avatar for asuprem

please use html code <center> or CSS margin:auto; to centerize the divs.

All the divs are centered. Here is my problem:

1. On firefox and chrome, divs are centered, but NOT on IE
2. the div with width 990px appears the same length as the divs with width 1000px on firefox and chrome, but NOT on IE.

What can I add to my div codes to center in IE?

What is up with the differing length appearances?

Member Avatar for lps

May I know which version of IE you are using? Based on my experience, these problems exist basically cause by margin problem or the doctype.

Member Avatar for asuprem

I am using IE9, but most users with IE will be using version 8

Member Avatar for lps

1. declare the doctype before <html> tag: <!DOCTYPE html>.
2. add css margin:auto; to divs
Normally these should fix the problem.

Member Avatar for asuprem

Thanks! That helped.

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.