Re: [css-d] Vertical centering? And another problem.

[Rory Bernstein]

> On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein  
> wrote:
>> Hi, I sent this yesterday and did not get any responses about the two items 
>> below. I'd be so appreciative to get some help. Thanks, Rory
>> 
>> http://rorybernstein.com/slider/vertical_center
>> 
>> I have this test page here. Two problems:

Thanks for the several suggestions, everyone. I will work on this, which will 
be easier now with this information.
Best,
Rory
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[G.Sørtun]

On 12.08.2011 14:52, Peter H. wrote:

in case this is of any help: the only way I've ever found to reliably centre 
vertically, is to use a good old-fashioned table.


CSS table is better - unless one has to support old-fashioned browsers 
with limited CSS support.


Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[David Laakso]

On 8/11/11 3:44 PM, Rory Bernstein wrote:

Hello CSS fans,

http://rorybernstein.com/slider/vertical_center

I have this test page here. Two problems:

1. In the slider (orange box at top), the content on the right side of the box 
does not show up in Chrome, but it does in FireFox. Meaning, the photo moves 
across as it should, but there is text on the right of it that is just not 
showing up.




Try embedding this ruleset in the head of the document and see if it 
corrects the Chrome / Safari problem?

.slideshow_text {border:1px dashed red;position: absolute;left:468px;top:0;}
Note that your layout is font-size dependent and that scaling the fonts 
and/or setting a minimum font size in the Firefox prefs will cause the 
text to escape the block and be unseen {same for below].




2. If you click the woman's face image (any one, they all work the same), you get 
an overlay that appears. In this box, I need the left and right cols to vertically 
center inside the div that has the red border on it. How? In other words, I want 
the white space above&  below the text (left) and photo (right) to be the same, 
not matter how much text, or what size image, I put int there.



Dunno. Or, rather, not sure why you would want to do that in the first 
place-- it will, at best, be very fragile and easily broken by anyone  
not running the same equipment and same settings as you.




Thanks in advance,
Rory



Best,
~d


--
http://chelseacreekstudio.com/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[Peter H.]

> El 12/08/2011, a las 14:27, Rory Bernstein escribió:
> 
> . . .  I need the left and right cols to vertically center inside the div 
> that has the red border on it. How? In other words, I want the white space 
> above & below the text (left) and photo (right) to be the same, not matter 
> how much text, or what size image, I put int there.
> 

in case this is of any help: the only way I've ever found to reliably centre 
vertically, is to use a good old-fashioned table. In this case, say, a single 
row with a cell each for your text and your image would probably do.

Best regards, Peter H.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[Tom Livingston]

On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein  wrote:
> Hi, I sent this yesterday and did not get any responses about the two items 
> below. I'd be so appreciative to get some help. Thanks, Rory
>
> http://rorybernstein.com/slider/vertical_center
>
> I have this test page here. Two problems:
>
> 1. In the slider (orange box at top), the content on the right side of the 
> box does not show up in Chrome, but it does in FireFox. Meaning, the photo 
> moves across as it should, but there is text on the right of it that is just 
> not showing up.
>
> 2. If you click the woman's face image (any one, they all work the same), you 
> get an overlay that appears. In this box, I need the left and right cols to 
> vertically center inside the div that has the red border on it. How? In other 
> words, I want the white space above & below the text (left) and photo (right) 
> to be the same, not matter how much text, or what size image, I put int there.
>
>
>


Sorry. For #2, vertical centering is tricky in CSS. Try googling it
and seeing which method you find may suit your situation. Personally,
I'd work out something with padding the top and bottom of the
red-ruled box or maybe include a min-height and let it go with that.

Again, HTH

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[Tom Livingston]

On Fri, Aug 12, 2011 at 8:27 AM, Rory Bernstein  wrote:
> Hi, I sent this yesterday and did not get any responses about the two items 
> below. I'd be so appreciative to get some help. Thanks, Rory
>
> http://rorybernstein.com/slider/vertical_center
>
> I have this test page here. Two problems:
>
> 1. In the slider (orange box at top), the content on the right side of the 
> box does not show up in Chrome, but it does in FireFox. Meaning, the photo 
> moves across as it should, but there is text on the right of it that is just 
> not showing up.
>
> 2. If you click the woman's face image (any one, they all work the same), you 
> get an overlay that appears. In this box, I need the left and right cols to 
> vertically center inside the div that has the red border on it. How? In other 
> words, I want the white space above & below the text (left) and photo (right) 
> to be the same, not matter how much text, or what size image, I put int there.
>
>

1) you are floating .slides to the left, and the images have x width.
There doesn't seem to be a lot of room left for the text and it drops
below.

Try dropping .middle and float both the .slides and .slideshow_text
left inside .slideshow_inner adjusting the width of .slideshow_text so
it comes up next to .slides.

Don't forget to clear your floats.

HTH


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertical centering? And another problem.

[Rory Bernstein]

Hi, I sent this yesterday and did not get any responses about the two items 
below. I'd be so appreciative to get some help. Thanks, Rory

http://rorybernstein.com/slider/vertical_center

I have this test page here. Two problems:

1. In the slider (orange box at top), the content on the right side of the box 
does not show up in Chrome, but it does in FireFox. Meaning, the photo moves 
across as it should, but there is text on the right of it that is just not 
showing up. 

2. If you click the woman's face image (any one, they all work the same), you 
get an overlay that appears. In this box, I need the left and right cols to 
vertically center inside the div that has the red border on it. How? In other 
words, I want the white space above & below the text (left) and photo (right) 
to be the same, not matter how much text, or what size image, I put int there.



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical centering? And another problem.

[David Laakso]

On 8/11/11 3:44 PM, Rory Bernstein wrote:

PS I redesigned my web site, in case anyone is interested:
http://www.rorybernstein.com







So far so good.

"Lets play..."
1/ Stress test.
2/ Fold and hold tablets and mobile.

Best,
Antonio Banderas
--Desparado


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertical centering? And another problem.

[Rory Bernstein]

Hello CSS fans,

http://rorybernstein.com/slider/vertical_center

I have this test page here. Two problems:

1. In the slider (orange box at top), the content on the right side of the box 
does not show up in Chrome, but it does in FireFox. Meaning, the photo moves 
across as it should, but there is text on the right of it that is just not 
showing up. 

2. If you click the woman's face image (any one, they all work the same), you 
get an overlay that appears. In this box, I need the left and right cols to 
vertically center inside the div that has the red border on it. How? In other 
words, I want the white space above & below the text (left) and photo (right) 
to be the same, not matter how much text, or what size image, I put int there.

Thanks in advance,
Rory

PS I redesigned my web site, in case anyone is interested:
http://www.rorybernstein.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering

[John D]

This link shows one way but it doesn't work in IE7, IE6 or other old browsers.



Perhaps somebody can provide a IE6, IE7 hack!

hth


> 
> what's the best way to vertically center multi-line anchor text (text can 
> wrap) where the anchor has a background image?
> 
> Thanks,
> Sara

  
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] vertical centering

[Sara Haradhvala]

what's the best way to vertically center multi-line anchor text (text can wrap) 
where the anchor has a background image?

Thanks,
Sara
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of multi-line text

[Tim Snadden]

On 9/06/2009, at 8:40 AM, David Laakso wrote:

> Debbie Campbell wrote:
>> In this page:
>>
>>
>>> http://www.redkitecreative.com/projects/fink/expertise.php
>>>
>>
>> I'm using display: table-cell and vertical-align for the paragraph  
>> text
>> to the right of each thumbnail image, but this isn't working in
>>
>
> Umm. Don't exactly know. Maybe???:
> .content-list-block p {border: 1px solid red;
> /*margin: 0;*/ margin: 0;padding-top: 18px;
> /*padding: 0;*/
> font-weight: bold;
> font-size: 1.1em;
> display:table; line-height: 1;
> /*height: 54px;*/
> /*line-height: 1.3em;*/
> /*display: table-cell;vertical-align: middle;*/
> }
> Please see: 

Another option is inline-block...

.content-list-block img {
display: -moz-inline-box; /* only for FF2 backwards 
compatibility */
display: inline-block; /* change display */
float: none; /* remove float as is forces display: 
block. Not  
required if it's inline-block. */
margin-right: 10px; /* Might as well be pixels if the 
container is */
vertical-align: middle; /* set vertical align */
}

.content-list-block p {
display: -moz-inline-box; /* only for FF2 backwards 
compatibility */
display: inline-block; /* change display */ 
padding-top: 0; /* reset padding */
padding-bottom: 0;
vertical-align:middle; /* set vertical align */
width: 210px; /* Set a width to your inline-block. */
}

You can make inline-block work in < IE8 by setting display to inline  
and forcing hasLayout (in IE only stylesheet. e.g.

.content-list-block p, .content-list-block img { display: inline;  
zoom: 1; }

See: http://snadden.com/sandbox/expertise.html

Cheers, Tim



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of multi-line text

[Debbie Campbell]

That works - thank you very much!

--
Debbie Campbell
Web Developer
Red Kite Creative LLC

d...@redkitecreative.com
www.redkitecreative.com
(970) 372-2125

David Laakso wrote:
> Debbie Campbell wrote:
>> In this page:
>>
>>  
>>> http://www.redkitecreative.com/projects/fink/expertise.php
>>> 
>>
>> I'm using display: table-cell and vertical-align for the paragraph 
>> text to the right of each thumbnail image, but this isn't working in 
>> Safari/Win; the  is floated all the way left and the thumbnail 
>> is displayed below the div.
>>
>> I can't use line-height as a way to center because one of the 
>> paragraph elements has two lines. Can someone help?
>>
>>   
> 
> Umm. Don't exactly know. Maybe???:
> .content-list-block p {border: 1px solid red;
> /*margin: 0;*/ margin: 0;padding-top: 18px;
> /*padding: 0;*/
> font-weight: bold;
> font-size: 1.1em;
> display:table; line-height: 1;
> /*height: 54px;*/
> /*line-height: 1.3em;*/
> /*display: table-cell;vertical-align: middle;*/
> }
> Please see: 
> 
> 
> 
> 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of multi-line text

[David Laakso]

Debbie Campbell wrote:
> In this page:
>
>   
>> http://www.redkitecreative.com/projects/fink/expertise.php
>> 
>
> I'm using display: table-cell and vertical-align for the paragraph text 
> to the right of each thumbnail image, but this isn't working in 
> Safari/Win; the  is floated all the way left and the thumbnail is 
> displayed below the div.
>
> I can't use line-height as a way to center because one of the paragraph 
> elements has two lines. Can someone help?
>
>   

Umm. Don't exactly know. Maybe???:
.content-list-block p {border: 1px solid red;
/*margin: 0;*/ margin: 0;padding-top: 18px;
/*padding: 0;*/
font-weight: bold;
 font-size: 1.1em;
display:table; line-height: 1;
/*height: 54px;*/
/*line-height: 1.3em;*/
/*display: table-cell;vertical-align: middle;*/
}
Please see: 



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of multi-line text

[Ingo Chao]

2009/6/8 Debbie Campbell 

> > http://www.redkitecreative.com/projects/fink/expertise.php
>
> I'm using display: table-cell and vertical-align for the paragraph text
> to the right of each thumbnail image, but this isn't working in
> Safari/Win; the  is floated all the way left and the thumbnail is
> displayed below the div.

Debbie, I don't have Safari Win, but what if the p gets a width?

Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] vertical centering of multi-line text

[Debbie Campbell]

In this page:

> http://www.redkitecreative.com/projects/fink/expertise.php

I'm using display: table-cell and vertical-align for the paragraph text 
to the right of each thumbnail image, but this isn't working in 
Safari/Win; the  is floated all the way left and the thumbnail is 
displayed below the div.

I can't use line-height as a way to center because one of the paragraph 
elements has two lines. Can someone help?

-- 
Debbie Campbell
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of list-style-image with list item

[scott.heckel]

// Is there any way to adjust the vertical alignment for IE?

Not for list images (as far as I can remember).  I wouldn't be too picky
about stuff like that, but if you really want it to look centered you
have a few options.

1) Bigger (vertically) image that does look centered.
2) Use a background image on the li instead (with a little left
padding).
3) Adjust the font-size and assume the user won't noodle with this. 

I think #1 is the way to go.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vertical centering of list-style-image with list item

[Stephen Tang]

Hi Scott,
Thanks for the reply.

I can't use a background image because there is an image that is
floated left of the list (as shown in
http://stephentang.info/listtest/test.html) .  The list is supposed to
wrap around the image, but the  tags take up the width of its
parent container.  Thus, using a background image on the li will just
cause the bullets to be on the extreme left of the parent container
(as shown in http://stephentang.info/floattest/test.html).

I'm going to try your other suggestions.

--Stephen

On Thu, May 28, 2009 at 11:23 AM,   wrote:
> // Is there any way to adjust the vertical alignment for IE?
>
> Not for list images (as far as I can remember).  I wouldn't be too picky
> about stuff like that, but if you really want it to look centered you
> have a few options.
>
> 1) Bigger (vertically) image that does look centered.
> 2) Use a background image on the li instead (with a little left
> padding).
> 3) Adjust the font-size and assume the user won't noodle with this.
>
> I think #1 is the way to go.
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] vertical centering of list-style-image with list item

[Stephen Tang]

Hello,
Previously, I received an answer from the CSS discuss list about using
list-style-image to solve my problem.
I noticed that IE6/7, the bullet image isn't even close to the
vertical center of the list item.  In Firefox 3 and Safari 3.x, the
image is more or less vertically centered with the list item.

Here is the test URL:
http://stephentang.info/listtest/test.html

Is there any way to adjust the vertical alignment for IE?

Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Centering

[Zoe M. Gillenwater]

Tom Livingston wrote:
> On 3/23/06 1:24 PM, "~davidLaakso" <[EMAIL PROTECTED]> wrote:
>
>   
> I'm not sorry (well, maybe about the 'Love you' comment...), but the
> bit about the content being off screen on short windows was correct.
> Of course, in my case the window had to be _very_ short, but none the
> less, it wasn't ideal. My content has a fixed width and height, so the
> other issues didn't apply.
>
> We used a table.
>
> CSS 3, where are you...
>
>   

CSS 3 isn't needed. Table-related display values -- part of CSS 2 -- are 
all that's needed. But IE doesn't support them.

CSS 2 support in IE, where are you...

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[Tom Livingston]

On 3/23/06 1:24 PM, "~davidLaakso" <[EMAIL PROTECTED]> wrote:

> You'll be sorry.

I'm not sorry (well, maybe about the 'Love you' comment...), but the
bit about the content being off screen on short windows was correct.
Of course, in my case the window had to be _very_ short, but none the
less, it wasn't ideal. My content has a fixed width and height, so the
other issues didn't apply.

We used a table.

CSS 3, where are you...

Thanks anyway all.


--

Tom Livingston
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[~davidLaakso]

Tom Livingston wrote:
>> http://dlaakso.com/center-stuff.html
>> 
>
> I love you.
>
> --
>
> Tom Livingston
>
>
>   
You'll be sorry. Vertical center positioning is /not/ a good idea. 
Re-read the thread regarding same.
~davidLaakso

-- 

Typography exists to honor content. 
--Robert Bringhurst


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[Michael Clayton]

> I recall someone posting a very easy method of vertical centering a
> block in a viewport a while back. Seemed straight forward -
> positioning with percentages and a little negative margin nudging.
> Googled but came up empty.
>
> Can anyone point me to this? How cross-browser is it?

Here's another for the record:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

I tried it in a bunch of browsers a few weeks ago.  It worked in more
than I expected.  As far as I remember, it worked in IE 5+, Opera 8+,
and Firefox.  No NN4 though.  Not sure about Mac browsers.

Kudos.

--
Michael Clayton
www.twilighted.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[Tom Livingston]

> http://dlaakso.com/center-stuff.html

I love you.

--

Tom Livingston
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[~davidLaakso]

Tom Livingston wrote:
> I recall someone posting a very easy method of vertical centering a
> block in a viewport a while back. ...]
> Tom Livingston
>
>   
Three replies to the same question a couple of days ago:

1/ #body {margin: 2px 0px 0px 0px;text-align: center;background-image: 
url(images/background.png);  }
 #container {margin: 0 auto;width: 763px;background-image: 
url(images/back.png);background-repeat: no-repeat;background-color: 
#ff;display: table;}
Set the container width and min-height in %. and add html, body { 
height: 100%; }  IE doesn't know 'display: table;' or min-height, so it 
is already being left out of the vertical centering party.  Most of the 
time, vertical centering turns out to be useless because web pages tend 
to get longer over time.  As soon as you have to scroll the vertical 
centering effect is gone (and if you do it wrong, content disappears 
out the top of the viewport).  In short I wouldn't worry about it too 
much.
Roger Roelofs

2/ Possible, but difficult-- and not user friendly. To stay centered 
vertically at 800 the height needs to be around 380px or less. Centering 
vertically, at any screen resolution, is dependent on user top and 
bottom window chrome. The height of the window varies wildly on my 
browsers. Compensating for probable font zoom is really tough(zoom the 
fonts on your current layout). Mostly one is better off taking advantage 
of the vertical fluidity of the Web, and the vertical canvas, by /not/ 
restricting height. That being said, this is one method for centering 
vertically and horizontally: .
~davidLaakso

3/ Note that if the window is shortened enough the top of the centered 
box gets cut off and cannot be scrolled to. I agree with David and Roger 
-- don't bother with vertical centering.
Zoe


Regards,
~davidLaakso



-- 

Typography exists to honor content. 
--Robert Bringhurst


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical Centering

[Tom Livingston]

Listers,

I recall someone posting a very easy method of vertical centering a
block in a viewport a while back. Seemed straight forward -
positioning with percentages and a little negative margin nudging.
Googled but came up empty.

Can anyone point me to this? How cross-browser is it?

Thanks a bunch.

--

Tom Livingston
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Vertical centering in a table cell using CSS

[Marjorie MacDonald]

Why do you need this 
style="height: 100%;vertical-align: middle;"
at all? 

Isn't the default for vertical alignment in a cell
center? If you don't do anything, and haven't set
anything in your CSS, the cell should be vertically
centered by default. 

Marjorie MacDonald

--- CJ Larson <[EMAIL PROTECTED]> wrote:

> >This doesn't seem to center vertically in either IE
> 6 or Firefox...
> 
> Do you have a sample page online?
> 
> I noticed you cut out the HTML  example from my
> original reply and
> only left in the CSS one.  Are you sure you were
> using the right
> example?  The full code for my td table was more
> like this (I'm only
> using inline styles for simplicity in emails):
> 
> 
> hello
> world
> 
> 
> 



__ 
Yahoo! DSL – Something to write home about. 
Just $16.99/mo. or less. 
dsl.yahoo.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] Vertical centering in a table cell using CSS

[CJ Larson]

>This doesn't seem to center vertically in either IE 6 or Firefox...

Do you have a sample page online?

I noticed you cut out the HTML  example from my original reply and
only left in the CSS one.  Are you sure you were using the right
example?  The full code for my td table was more like this (I'm only
using inline styles for simplicity in emails):


hello
world


__
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] Vertical centering in a table cell using CSS

[Sam Carter]

CJ Larson wrote:

>>Is there a way to vertically center content in a table cell using CSS
>>(not HTML)?
>>
>>
>
>A CSS table cell or an HTML table cell?
>  
>

This is a  cell

>CSS:
>[assume markup -> ]
>.vcenter {display: table-cell;vertical-align: middle;height: 100%;}
>
>  
>
This doesn't seem to center vertically in either IE 6 or Firefox...

My mistake or is there a correction?

Sam

__
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] Vertical centering in a table cell using CSS

[rolfsf]

okay, so slightly OT here... could someone explain the use of  
display:table-cell?
I can never seem to get my brain around the how's and why's
Like, why wouldn't you use a table instead of divs acting like tables  
and table cells?

thanks!


>> Is there a way to vertically center content in a table cell using CSS
>> (not HTML)?
>
> A CSS table cell or an HTML table cell?
>
> CSS:
> [assume markup -> ]
> .vcenter {display: table-cell;vertical-align: middle;height: 100%;}
>
> HTML:
> [assume markup -> ]
> .vcenter {vertical-align: middle;}
__
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] Vertical centering in a table cell using CSS

[CJ Larson]

> Is there a way to vertically center content in a table cell using CSS
> (not HTML)?

A CSS table cell or an HTML table cell?

CSS:
[assume markup -> ]
.vcenter {display: table-cell;vertical-align: middle;height: 100%;}

HTML:
[assume markup -> ]
.vcenter {vertical-align: middle;}
__
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/

[css-d] Vertical centering in a table cell using CSS

[Sam Carter]

Is there a way to vertically center content in a table cell using CSS 
(not HTML)?

Sam

__
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] vertical centering text in Internet Explorer

[Ingo Chao]

dimpie schrieb:

Is it possible to center text vertically in a div  in Internet Explorer.


See Bruno Fassino's solution:
http://www.brunildo.org/test/vertmiddle.html
http://www.brunildo.org/test/img_center.html


Ingo


--
http://www.satzansatz.de/css.html
__
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/

[css-d] vertical centering text in Internet Explorer

[dimpie]

Is it possible to center text vertically in a div  in Internet Explorer.
I managed to make it work in FireFox and Opera by applying the following:

div {
display: table-cell;
vertical-align: middle;
   }

but I can't get it to work in IE.

Any help would be appreciated.
Thanks in advance.

Dimpie.
__
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] Vertical centering

[David Laakso]

On Thu, 26 May 2005 15:55:11 -0400, Thomas Livingston  
<[EMAIL PROTECTED]> wrote:




On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Downsides to this method?

This may be out of context,  as I'm unable to find the original post...
Well, anyway,  with that method-- if the window is too small for the  
content,  it is cut off without giving you a scroll bar to see it all.

Tom Livingston

Regards,
David Laakso
--
http://www.dlaakso.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] Vertical centering

[Bruno Fassino]

Thomas Livingston

> How about this one?
>
> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

This assumes that the dimensions of the box to be centered are known, so it
can be effectively used only in very specific cases. If the page content is
an unknown amount of text (and may be images) it's impossible to determine
in advance its height (not even using ems..)  It's fine for centering an
headline, a logo, or something like that, nothing more.
The method used by Uwe is more general, as few others. The problem is that
probably no one is foolproof and really cross browsers (depending on which
browsers we want to include.)

Bruno

__
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] Vertical centering

[Pactum web services]

- Original Message - 
From: "Thomas Livingston" <[EMAIL PROTECTED]>

To: "Bruno Fassino" <[EMAIL PROTECTED]>
Cc: ; "'Uwe Kaiser'" <[EMAIL PROTECTED]>
Sent: Thursday, May 26, 2005 1:55 PM
Subject: Re: [css-d] Vertical centering




On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html


Hm. That looks very interesting. The problem I see, however, is that it 
requires a specified height. I would think, however, there would be a way 
around this.


Thanks for the link.

tim

Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.pactumgroup.com/tutorials/
Web dev FAQs: http://www.pactumgroup.com/tutorials/faq.php
Techblog: http://www.pactumgroup.com/techblog
** 



__
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] Vertical centering

[Thomas Livingston]

On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Downsides to this method?


Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com

---
www.browsehappy.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] Vertical centering

[Bruno Fassino]

Uwe Kaiser wrote:

> It is just an idea of how to center a container vertically.
>
> http://www.kriton.de/CSS/zentrieren/alle-zentriert.html

I read on your page that you tested in older browsers, and that's a good
thing!
I just had a quick look, the vertical centering method seems similar to this
one [1], is this correct?
As Ingo mentioned in a recent message, an attempt to use "centering in the
viewport" in a more complex page, with elements protruding from the centered
part, showed a lot of problems with different browsers (and unfortunately
this type of centering doesn't work in IE/Mac, unless it is put in Quirks
mode.)

Bruno


[1] 

__
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/

[css-d] Vertical centering

[Uwe Kaiser]

Hi,

It is just an idea of how to center a container vertically.

Don' care about german text.

http://www.kriton.de/CSS/zentrieren/alle-zentriert.html


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/