View Full Version : Centering DIV in IE

12-13-2007, 05:59 PM
I'm redesigning my site using CSS, and am having issues with my float elements. They are all floating the the left side of the screen in IE6, (in firefox everything looks great). I created a centering DIV (contentContainer) that has a set width, and a margin of 0 auto, and placed everything inside of that, but that DIV is not centering.

I think it may be a doctype issue, and I'm using iframes, but I believe I need to use a transitional doctype so my iframes validate, correct?

Here are the links.

Link: http://www.tincanstudios.com/redesign/

CSS: http://www.tincanstudios.com/redesign/styles.css

Thanks in advance, this board and its members are a great resource.

12-13-2007, 06:02 PM
No, HTML 4.01 permits the use of iframes. They are deprecated in XHTML 1 and will be brought back in HTML5.

12-13-2007, 06:13 PM
Goodmorning bofa,
In your CSS you have margin: 0 auto on the body. It's kind of hard to center something that is the full width of the browser window.
Instead, your outer-most div - #dropShadowRepeat, should be the width of your website and then you can center that.
Like this:
background-color: #9FC5D0;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
h1 {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
background-image: url(images/dropShadowRepeat.jpg);
background-repeat: repeat-y;
width: 778px;
margin: 0 auto;
padding: 0;


12-13-2007, 07:26 PM
Thanks for the prompt replies.

I tried the CSS fix you recommended Excavator, and now everything is slammed to the left, (I uploaded the CSS fix to the server so it can be viewed).

In the future, I plan on having one of those elaborate backgrounds that extends the width of the screen, which is why I wanted a width of 100%. However, if I can get everything centered as is, that idea might take a back seat.

So the problem still exists. The div's aren't centering in IE. What's up with that?

12-13-2007, 07:33 PM
How about applying a proper doctype that will put IE into standards mode, and hence adhere to standards rather than falling back to IE 5 behavior (where margin: auto; centering didn’t work)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That’s the one you should use.

12-13-2007, 07:50 PM
Yup, check my sig about DocTypes.

12-13-2007, 08:25 PM
He used a Transitional DocType because he thought he needed it to validate iframes. Right?

12-13-2007, 08:30 PM
Although iframes are unnecessary (having been superceded by the object tag) it has not yet been officially deprecated in HTML.

12-14-2007, 08:08 AM
He used a Transitional DocType because he thought he needed it to validate iframes. Right?

Still, if you thoroughly study and compare his doctype and the one I proposed you might see that there’s something missing in his one.

12-14-2007, 05:22 PM
I think IE renders in standards with HTML 4.01 Strict w/URL & Firefox not, or the other way around. I'm not sure.

12-14-2007, 08:49 PM
Firefox renders reasonably close to the standards regardless of the Doctype. IE renders as close as it can to the standards with a complete valid doctype as the first statement. IE with an incomplet, misplaced or missing doctype will go into quirks mode. Whether you use a strict or transitional doctype affects how you access certain information about the browser in JScript in IE but doesn't affect the interpretation of the stylesheet.

12-14-2007, 10:09 PM
And if you put this DOCTYPE in your document:
This tells modern browsers that you want to display your HTML 4.01 page in strict compliance with the DTD. These browsers will go into "strict" or "standards" mode and render the page in compliance with the standards.
Yeah, URL minimization is valid &, in this case, triggers standards mode.