[css-d] Content not centering in IE
Hi, I posted a few days before Christmas but with all the pre-Christmas busy-ness it most likely got overlooked. So I'm posting again now... I have set of pages in a subfolder on a site with their own stylesheet. The page contents center beautifully in Firefox and Opera, but not in IE (the content is set to 0 auto 0 auto). The elements center under each other but they are not centered in the middle of the page. I figure there's probably got to be a fix for this in IE. I am not at home at the present so I can include the link but not the stylesheet...however, I posted it on Wed or Thurs of last week. And if anyone here needs it, I will post it again as soon as I get back home tomorrow. Here is the link to main page...any of the text or image links on this page will lead to one of the pages in question. http://www.drk-writing.com/northwesternesse/fanart.htm BTW, I checked tried to check the Archives as this seems like a question that may have come up before, but the Archives button does not appear to be linked. Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
iorhael wrote: ... I have set of pages in a subfolder on a site with their own stylesheet. The page contents center beautifully in Firefox and Opera, but not in IE (the content is set to 0 auto 0 auto). The elements center under each other but they are not centered in the middle of the page. I figure there's probably got to be a fix for this in IE. ... IE 5.5 and earlier doesn't know about margin:auto. IE 6 does. There's a good page about centering block elements in our wiki. http://css-discuss.incutio.com/?page=CenteringBlockElement -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
On 26.12.2005 11:31, iorhael wrote: Hi, I posted a few days before Christmas but with all the pre-Christmas busy-ness it most likely got overlooked. So I'm posting again now... I have set of pages in a subfolder on a site with their own stylesheet. The page contents center beautifully in Firefox and Opera, but not in IE (the content is set to 0 auto 0 auto). The elements center under each other but they are not centered in the middle of the page. I figure there's probably got to be a fix for this in IE. I am not at home at the present so I can include the link but not the stylesheet...however, I posted it on Wed or Thurs of last week. And if anyone here needs it, I will post it again as soon as I get back home tomorrow. Here is the link to main page...any of the text or image links on this page will lead to one of the pages in question. http://www.drk-writing.com/northwesternesse/fanart.htm BTW, I checked tried to check the Archives as this seems like a question that may have come up before, but the Archives button does not appear to be linked. Thanks! Debbie On the foot of every posting you can see the following link to the FAQ: List wiki/FAQ -- http://css-discuss.incutio.com/ And there: Tips Tricks # CenteringBlockElement - how to center a block element Regards, Uwe Kaiser __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
iorhael wrote:
... The elements center under each other but they are not centered in
the middle of the page. I figure there's probably got to be a fix
for this in IE.
I picked this page:
http://www.drk-writing.com/northwesternesse/FanArt/bk_sting.htm
This comment before the doctype: !-- InstanceBegin
template=/Templates/nwe_fanart.dwt codeOutsideHTMLIsLocked=false
--!DOCTYPE HTML PUBLIC ...
... throws IE6 into old 'quirks mode'. Other browsers won't react on
such a comment, so they'll stay in 'standard compliant mode'. Thus, IE6
won't react to 'margin: 0 auto 0 auto'.
Solution:
1: get rid of the comment and give IE6 a chance. (IE5/5.5 will still
need the fix in solution 2)
2: add: #box {text-align: center;} and all IE will center properly,
regardless of mode.
---
#content has a width defined in 'em'. That's not a problem as long as
there's room for it, but it will overflow the layout and skew the
content regardless of margins on larger font-sizes. Read: font-resizing.
Quite normal result for all 'em'-dimensioned containers.
#content {max-width: 600px;} will hold it in place. Some like that -
some don't.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
This comment before the doctype: !-- InstanceBegin
template=/Templates/nwe_fanart.dwt codeOutsideHTMLIsLocked=false
--!DOCTYPE HTML PUBLIC ...
... throws IE6 into old 'quirks mode'. Other browsers won't react on
such a comment, so they'll stay in 'standard compliant mode'. Thus, IE6
won't react to 'margin: 0 auto 0 auto'.
Solution:
1: get rid of the comment and give IE6 a chance. (IE5/5.5 will still
need the fix in solution 2)
2: add: #box {text-align: center;} and all IE will center properly,
regardless of mode.
George...thank you for catching that comment! That was definitely in the
wrong place. I redid the template and updated all the pages so that that
comment comes *after* the DocType.
However, despite the fact that I have indicated center alignment and auto
margins all the way through, the content for these pages is aligning left in
all three browsers now :( (IE, FF, Opera). So here is my stylesheet...would
you mind taking a look at it? I gave the #box id an alignment of center.
thanks!
Debbie
http://www.northwesternesse.com/FanArt/bk_sting.htm
A:link { text-decoration: underline; color:#33; } /*dk green*/
A:visited { text-decoration: underline; color:#990099; } /*purple*/
A:hover { text-decoration: underline; color:#009966; } /*green*/
A:active { text-decoration: underline; color:#009966; } /*green*/
body {
background-image: url(../NWEGraphics/nwelogobkgrd.gif);
background-attachment: fixed;
background-color: #fff;
background-position: center;
text-align: center;
scrollbar-face-color: #030;
scrollbar-shadow-color: #66846A;
scrollbar-highlight-color: #66846A;
scrollbar-3dlight-color: #030;
scrollbar-darkshadow-color: #003300;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #fff;
}
p {
font-family: 'Comic Sans MS', sans-serif;
font-size: 14px;
color: #000;
text-align: center;
}
h1 {
font-family: 'Comic Sans MS', sans-serif;
font-size: 16px;
text-align: center;
color: #030;
font-weight: normal;
}
#box {
width: 740px;
margin: 10px auto 10px auto;
line-height: 115%;
text-align: center;
border: solid 1px #030;
color: #000;
}
#banner {
background-color: #030;
border-bottom: 1px solid #030;
width: 100%;
margin-bottom: 0;
}
/*top menu*/
#menu {
margin: 0 auto 0 auto;
padding: .25em 0 .25em 0;
border-bottom: solid 1px #030;
text-align: center;
width: 100%;
}
/*content for poems and art*/
#content {
padding: 1.5em 1.5em 2.5em 1.5em;
margin: 0 auto 0 auto;
}
/*art nav arrows*/
img.arrow {
padding-left: .5em;
padding-right: .5em;
}
/*bottom links and copyright statement*/
#footer {
clear: both;
padding: .5em;
border-top: 1px solid #030;
text-align: center;
}
.navcopyright {
display: inline;
font-family: 'Comic Sans MS', sans-serif;
font-size: 10px;
line-height: 14px;
text-align: center;
color: #030;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
George, You can ignore my previous message with the stylesheet...when I redid the templates for those pages I forgot to update the stylesheet link...I have done that now and everything is looking fine :) Thank you so much for the IE tips! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
