Member Avatar for clint6998

I am building a site and the main couple of DIV tags are not centered in IE but they are in firefox, opera and chrome. any ideas? here is my css code for my problem:

body
{
	color: #333;
	margin:0 auto;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	background-color: #fde0dd;
}

#main
{
	width: 734px;
	margin:0 auto;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	align: center;
	
}

Where body is the body and #main wraps ALL other content and code.

any ideas?

Thanks,

Clint

  • 3 Contributors
  • 3 Replies
  • 86 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by clint6998

Dani AI

Generated

Thread summary and extra checks beyond the replies from and : the usual fixes (text-align fallbacks and a correct doctype) are shown in the thread and are good first steps. If a block with a set width still refuses to center in Internet Explorer, the issue is often one of rendering mode, ancestor layout (floats/positioning), or older-IE layout quirks that the original posts did not fully cover.

Quick troubleshooting checklist (practical, verifiable):

  • Confirm standards mode: inspect document.compatMode in the console; expected value is CSS1Compat for standards rendering (see MDN for compatMode).
  • Inspect computed styles with the browser dev tools (F12). Verify the element has an explicit width and is not floated or absolutely positioned; a floated ancestor will prevent normal centering.
  • Look for broken HTML (missing end tags) that can trigger quirks mode and change box-model behavior.
  • For legacy IE (6/7) layout bugs, trigger hasLayout on the centered element. Example fix:
    /* legacy IE hasLayout trigger */
#main { zoom: 1; }

Modern, more robust centering alternatives:

  • Flexbox on the parent: display: flex; justify-content: center; (works across modern browsers).
  • Transform centering: position at 50% and translateX(-50%) for pixel-perfect centering when absolute/relative positioning is acceptable.

For a compact guide to the many centering techniques and browser-compat notes, see the CSS-Tricks centering guide and MDN margin documentation.

(References: Document.compatMode, Centering in CSS — CSS-Tricks, MDN — margin (auto margins))

Recommended Answers

All 3 Replies

Member Avatar for Member #120589 
body
{
	color: #333;
	margin:0 auto;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	background-color: #fde0dd;
}
 
#main
{
	width: 734px;
	margin:0 auto;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	align: center;
 
}

No need to centre body. No such property as 'align'. Try this:

body
{
	color: #333;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	background-color: #fde0dd;
        text-align: center;
}
 
#main
{
	width: 734px;
	margin:0 auto;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
 
}

The text-align properties should serve to sort out earlier versions of IE.

Member Avatar for ko ko

IE needs DTD to support auto margin. You can use these.
In transitional mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In strict mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-strict.dtd">

In frame-set mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-frameset.dtd">

You should always validate your markup. Go here to validate.

Member Avatar for clint6998

ardav: thanks but i was not wanting to center my text, but the div tag holding the text.

zero13: thanks! i had overlooked that and that was what I forgot.

Clint

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.