Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
> #parent
> {
> /* center child in IE */
> text-align: center;
> }
I believe this is true for IE in *quirks mode*.
---
Regards,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
At 4/27/2007 04:04 PM, Lori Lay wrote:
>[EMAIL PROTECTED] wrote:
> > If you change your CSS to the following it will work.
> >
> > #footer {
> > height:50px;
> > position:relative;
> > }
> > #footwrap
> > {
> > position:absolute;
> > bottom:0;
> > width:100%;
> > }
> > #footwrap p
> > {
> > text-align:center;
> > }
> >
>
>I got this reply off-list. Changing the code as suggested above and
>adding left: 0; to #footwrap worked like a charm.
Another principal at work here is that IE applies text-align not just
inline elements but to block-level elements as well. So, for
instance, a standard way to center a block cross-browser has been:
[content...]
#parent
{
/* center child in IE */
text-align: center;
}
#child
{
/* center child in compliant browsers */
margin: 0 auto;
/* don't center child's contents (correction for IE hack) */
text-align: left;
}
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
At 4/27/2007 03:28 PM, Lori Lay wrote:
>I would like to vertically align and centre some text at the bottom of a
>division.
...
>
>
> Here is the text I want to centre on the bottom
>
>
>
>CSS:
>
>#footer {
> text-align: center;
> position: relative;
> width: 100%;
> height: 50px;
> clear: both; }
>
>#footwrap {
> position: absolute;
> bottom: 0; }
>
>Here's the problem: the text is properly aligned at the bottom of the
>footer, but only the start of the paragraph is horizontally centred. As
>you can see, I am using text-align: center to centre the text. This
>doesn't work in this case (in IE 6 only). The start of the paragraph is
>correctly centred, but not the whole thing. So in my example above, the
>word Here seems to be centred, but not the entire line.
According to the spec [1] text-align should be inherited, so perhaps
you've stumbled across one of the many spots where IE6 drifts away
from the spec either deliberately or buggily.
I would try applying centering to the paragraph itself with #footwrap
p { text-align: center; }
You might also be able to diagnose the problem more clearly if you
apply a background-color to the paragraph. Does that show that the
first line is centered and the others are flush-left?
[1] CSS 2.1 Specification : 16 Text : 16.2 Alignment: the 'text-align' property
http://www.w3.org/TR/CSS21/text.html#alignment-prop
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
Mauricio Samy Silva wrote:
> Hi Lori,
> Try the following CSS:
>
> #footer {
>position: relative;
>width: 100%;
>height: 50px;
>clear: both; }
>
> #footwrap p {
> width:100%;
> margin:0 auto;
> position: absolute;
> bottom: 0;
> text-align:center;
> }
>
> Regards,
>
> Maurício Samy Silva
> http://www.maujor.com/
>
>
Thanks Maurício that works too. Two solutions in ten minutes - beauty!!
Lori
>
>> I would like to vertically align and centre some text at the bottom of a
>> division. In compliant browsers, I can accomplish this by using
>> display: table and display: table-cell with vertical-align: bottom.
>> This works like a charm.
>>
>> However, in IE 6, I have an odd problem. I
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
[EMAIL PROTECTED] wrote:
> If you change your CSS to the following it will work.
>
> #footer {
> height:50px;
> position:relative;
> }
> #footwrap
> {
> position:absolute;
> bottom:0;
> width:100%;
> }
> #footwrap p
> {
> text-align:center;
> }
>
I got this reply off-list. Changing the code as suggested above and
adding left: 0; to #footwrap worked like a charm.
Thanks Scott.
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Lori Lay
> Sent: Friday, April 27, 2007 5:29 PM
> To: CSS-discuss
> Subject: [css-d] Vertically Aligning Text in Division - IE 6 Problem
>
> ...
> Here's the problem: the text is properly aligned at the bottom of the
> footer, but only the start of the paragraph is horizontally centred. As
> you can see, I am using text-align: center to centre the text. This
> doesn't work in this case (in IE 6 only). The start of the paragraph is
> correctly centred, but not the whole thing. So in my example above, the
> word Here seems to be centred, but not the entire line.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
Hi Lori,
Try the following CSS:
#footer {
position: relative;
width: 100%;
height: 50px;
clear: both; }
#footwrap p {
width:100%;
margin:0 auto;
position: absolute;
bottom: 0;
text-align:center;
}
Regards,
Maurício Samy Silva
http://www.maujor.com/
> I would like to vertically align and centre some text at the bottom of a
> division. In compliant browsers, I can accomplish this by using
> display: table and display: table-cell with vertical-align: bottom.
> This works like a charm.
>
> However, in IE 6, I have an odd problem. I
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertically Aligning Text in Division - IE 6 Problem
Hi,
I would like to vertically align and centre some text at the bottom of a
division. In compliant browsers, I can accomplish this by using
display: table and display: table-cell with vertical-align: bottom.
This works like a charm.
However, in IE 6, I have an odd problem. I have read that the
work-around to IE's lack of display: table support is to use absolute
positioning. Here's a mock-up of the code:
Here is the text I want to centre on the bottom
CSS:
#footer {
text-align: center;
position: relative;
width: 100%;
height: 50px;
clear: both; }
#footwrap {
position: absolute;
bottom: 0; }
Here's the problem: the text is properly aligned at the bottom of the
footer, but only the start of the paragraph is horizontally centred. As
you can see, I am using text-align: center to centre the text. This
doesn't work in this case (in IE 6 only). The start of the paragraph is
correctly centred, but not the whole thing. So in my example above, the
word Here seems to be centred, but not the entire line.
Does anybody have any ideas?
Thanks,
Lori
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
