...

View Full Version : Centering DIV in IE



bofa
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.

Apostropartheid
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.

Excavator
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:
body{
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;
}
#dropShadowRepeat{
background-image: url(images/dropShadowRepeat.jpg);
background-repeat: repeat-y;
width: 778px;
margin: 0 auto;
padding: 0;
}

#dropShadowNoRe

bofa
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?

VIPStephan
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.

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

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

felgall
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.

VIPStephan
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.

Apostropartheid
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.

felgall
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.

Apostropartheid
12-14-2007, 10:09 PM
And if you put this DOCTYPE in your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum