I'm setting up a 3-column layout with CSS which was looking just great with IE 5.2, NS 7.1 and Safari on the Mac, and very weird with IE 5, 6 and NS 7 on Windows.
I have a "contents" div and then 3 columns nested, "leftcontent", "centercontent" and "rightcontent". On Windows, when I attempt to center the "content" DIV along with its children, the 3 children *begin* at the very center point of the page and proceed to the right. I've tried many things but the problem remains intractable.
Test Site: <!-- m --><a class="postlink" href="http://www.hyperarts.com/clients/test/index.html">http://www.hyperarts.com/clients/test/index.html</a><!-- m -->
CSS: <!-- m --><a class="postlink" href="http://www.hyperarts.com/clients/test/_includes/style.css">http://www.hyperarts.com/clients/test/_ ... /style.css</a><!-- m -->
Thanks for any help!
TimEasy fix:
/* CONTENT CONTAINERS */
.content {
width: 760px;
margin: 1px auto 0px auto;
padding: 0;
font-size: 11px;
border: 1px dashed #999;
}
/* Hack to center content in IE5.x/PC */
body { text-align: center; }
div {text-align: left; }
/* End IE5.x hack */
Setting the left and right margins to auto centers block-level elements within their parent element. IE5.x/PC doesn't do this and IE6 doesn't do it either if you aren't working in standards compliance mode.Thanks. I'm not sure I added in the code you suggested correctly.
Under the IE hacks, I wasn't where this should go:
div { text-align: left }
I changed the margin attributes in "content" and the text-align attribute to "body".
I still get the centering of the 3 nested divs beginning on the center point of the page in IE on Win. Looks good on Mac Safari and NS 7, and the logo and nav don't center but the content does with IE 5.2 on Mac.
I *know* I'm missing something when someones says "easy fix"! ;-)
Thanks. I upload the changed pages to the same URL as my original post on this topic.
TimJust copy the whole block of code I gave in my first post and paste it in place of the style declarations for .content in your CSS file. Upload and refresh. Bam! You're done
I have a "contents" div and then 3 columns nested, "leftcontent", "centercontent" and "rightcontent". On Windows, when I attempt to center the "content" DIV along with its children, the 3 children *begin* at the very center point of the page and proceed to the right. I've tried many things but the problem remains intractable.
Test Site: <!-- m --><a class="postlink" href="http://www.hyperarts.com/clients/test/index.html">http://www.hyperarts.com/clients/test/index.html</a><!-- m -->
CSS: <!-- m --><a class="postlink" href="http://www.hyperarts.com/clients/test/_includes/style.css">http://www.hyperarts.com/clients/test/_ ... /style.css</a><!-- m -->
Thanks for any help!
TimEasy fix:
/* CONTENT CONTAINERS */
.content {
width: 760px;
margin: 1px auto 0px auto;
padding: 0;
font-size: 11px;
border: 1px dashed #999;
}
/* Hack to center content in IE5.x/PC */
body { text-align: center; }
div {text-align: left; }
/* End IE5.x hack */
Setting the left and right margins to auto centers block-level elements within their parent element. IE5.x/PC doesn't do this and IE6 doesn't do it either if you aren't working in standards compliance mode.Thanks. I'm not sure I added in the code you suggested correctly.
Under the IE hacks, I wasn't where this should go:
div { text-align: left }
I changed the margin attributes in "content" and the text-align attribute to "body".
I still get the centering of the 3 nested divs beginning on the center point of the page in IE on Win. Looks good on Mac Safari and NS 7, and the logo and nav don't center but the content does with IE 5.2 on Mac.
I *know* I'm missing something when someones says "easy fix"! ;-)
Thanks. I upload the changed pages to the same URL as my original post on this topic.
TimJust copy the whole block of code I gave in my first post and paste it in place of the style declarations for .content in your CSS file. Upload and refresh. Bam! You're done