Board index » html » vertical-align

shank

Registered User

vertical-align

2004-02-07 10:14:00 AM
<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.
thanks
-
 
chris

Registered User

2004-02-07 10:50:00 AM

Re:vertical-align

Yes it should be aligned in the middle of the cell. Can you give an URL
please? What browser do you use?
"shank" <shank@tampabay.rr.com>schrieb im Newsbeitrag
Quote
<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.
thanks


-
Leif K-Brooks

Registered User

2004-02-07 12:40:00 PM

Re:vertical-align

shank wrote:
Quote
<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.
Yes, but it's generally the default anyway. URL?
-
Clive Moss

Registered User

2004-02-08 08:19:00 AM

Re:vertical-align

"shank" <shank@tampabay.rr.com>wrote in message
Quote
<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.
thanks


If the code on your page is as you've written it here - then adding the
final ";" would help
Clive
-
Steve Pugh

Registered User

2004-02-08 10:00:00 AM

Re:vertical-align

"Clive Moss" <clive@takethisoutinstant-image.co.uk>wrote:
Quote
"shank" <shank@tampabay.rr.com>wrote in message
news:sRXUb.56800$fH2.55303@twister.tampabay.rr.com...
Quote

<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.

If the code on your page is as you've written it here - then adding the
final ";" would help
Why? in CSS ; is a separator not a terminator. Do you know of any
browsers that are so buggy as to ignore final styles that do not have
a ; after them?
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <steve@pugh.net><steve.pugh.net/>
-
Chris Morris

Registered User

2004-02-11 11:12:00 PM

Re:vertical-align

"Clive Moss" <clive@takethisoutinstant-image.co.uk>writes:
Quote
"shank" <shank@tampabay.rr.com>wrote in message
news:sRXUb.56800$fH2.55303@twister.tampabay.rr.com...
Quote
<td style="width:40%; vertical-align:middle">
Is vertical-align:middle supposed to work inside a table cell for text?
My text still lines up on the bottom.
That should work. However, vertical-align: middle is the default for
<td>anyway, in most browsers, which suggests you have something else
making it align to the bottom of the cell.
Quote
If the code on your page is as you've written it here - then adding the
final ";" would help
In what browser? It's a separator, not a terminator, so it shouldn't
be needed - I don't know of any browser that requires it.
--
Chris
-
Jeff Thies

Registered User

2004-06-26 01:16:00 PM

Re:vertical-align

You can do this in a table cell:
...
<td valign="middle">
<p>content in middle of cell</p>
</td>
Can you do this with a div?
<div style="height: 300px; vertical-align: middle">
<p>...
Actually, I read that that should work! Does nothing for me.
Jeff
-
rf

Registered User

2004-06-26 01:27:00 PM

Re:vertical-align

"Jeff Thies" <nospam@nospam.net>wrote in message
Quote
You can do this in a table cell:
...
<td valign="middle">
<p>content in middle of cell</p>
</td>
www.w3.org/TR/html4/struct/tables.html.2.6
Yep. valign is specifically mentioned for table cell elements.
Quote
Can you do this with a div?

<div style="height: 300px; vertical-align: middle">

<p>...
www.w3.org/TR/html4/struct/global.html.5.4
Nope. valign is not mentioned for div elements.
Quote
Actually, I read that that should work!
Where did you read that?
--
Cheers
Richard.
-
Spartanicus

Registered User

2004-06-26 03:12:00 PM

Re:vertical-align

"Jeff Thies" <nospam@nospam.net>wrote:
Quote
You can do this in a table cell:
...
<td valign="middle">
<p>content in middle of cell</p>
</td>

Can you do this with a div?
www.student.oulu.fi/~laurirai/www/css/middle/
--
Spartanicus
-
windandwaves

Registered User

2006-10-29 07:47:00 AM

Re:vertical-align

Hi Folk
Can you do vertical-align bottom in a div or only really in a table? I
prefer to use divs of course, but in tables, the vertical align seems
to be working better. Is this correct?
TIA
Nicolaas
-
Ben C

Registered User

2006-10-29 11:11:00 PM

Re:vertical-align

On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
Quote
Hi Folk

Can you do vertical-align bottom in a div or only really in a table?
You can set it on inline level elements to move them relative to the
line they're on. But if you want the effect of a box with a set height
that contains another box at the bottom of it, use positioning. Set the
outer box to position: relative (or position: absolute), and the inner
box to position: absolute with bottom: 0px.
You set position on the outer box just to make it the containing block
for the inner box (i.e. the block the inner box is 0px from the bottom
of).
Using relative rather than absolute on the outer box keeps it "in the
normal flow".
-
windandwaves

Registered User

2006-10-30 04:13:00 AM

Re:vertical-align

Ben C wrote:
Quote
On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
Quote
Hi Folk

Can you do vertical-align bottom in a div or only really in a table?

You can set it on inline level elements to move them relative to the
line they're on. But if you want the effect of a box with a set height
that contains another box at the bottom of it, use positioning. Set the
outer box to position: relative (or position: absolute), and the inner
box to position: absolute with bottom: 0px.

You set position on the outer box just to make it the containing block
for the inner box (i.e. the block the inner box is 0px from the bottom
of).

Using relative rather than absolute on the outer box keeps it "in the
normal flow".
Hi, I tested it and it works a treat. THANK YOU
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="outer" style="position: relative; height: 300px;
background-color: #ccc; width: 200px;">
<div id="inner" style="position: absolute; bottom: 0px;
background-color: #777; ">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque leo. Duis
arcu erat, posuere non, fringilla vel, ultricies ut, purus. Nunc
turpis. Nullam
hendrerit, elit nec molestie pellentesque, ligula ante tempor dui, eu
molestie
nibh erat sed sem. Maecenas orci. Donec aliquam imperdiet sapien.
</div>
</div>
</body>
</html>
-
Jonathan N. Little

Registered User

2006-10-30 04:32:00 AM

Re:vertical-align

windandwaves wrote:
Quote
Hi, I tested it and it works a treat. THANK YOU

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Now just update your doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"www.w3.org/TR/html4/strict.dtd">
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
www.LittleWorksStudio.com
-
windandwaves

Registered User

2006-10-30 10:55:00 AM

Re:vertical-align

Jonathan N. Little wrote:
Quote
windandwaves wrote:

Quote
Hi, I tested it and it works a treat. THANK YOU

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Now just update your doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"www.w3.org/TR/html4/strict.dtd">
I go for xhtml strict, but visual studio from Windoz does not....
Sorry. Thanks again for your help.
-
Jonathan N. Little

Registered User

2006-10-30 11:16:00 AM

Re:vertical-align

windandwaves wrote:
Quote
Jonathan N. Little wrote:
Quote
windandwaves wrote:

>Hi, I tested it and it works a treat. THANK YOU
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Now just update your doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"www.w3.org/TR/html4/strict.dtd">


I go for xhtml strict, but visual studio from Windoz does not....
Sorry. Thanks again for your help.

What! MS won't let you change your doctype! Or is just a default, and
most don't know how to change it. Don't know Visual Studio, most folks
who use Perl with CGI.pm only use the default "XHTML 1.0 Transitional"
but you *can* change it....
use CGI qw(-no_xhtml);
$CGI::DEFAULT_DTD = ['-//W3C//DTD HTML 4.01//EN',
'www.w3.org/TR/html4/strict.dtd'];
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
www.LittleWorksStudio.com
-
password

Registered User

2006-10-31 03:18:00 PM

Re:vertical-align

"windandwaves" <nfrancken@gmail.com>wrote in message
Quote

Ben C wrote:
Quote
On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
>Hi Folk
>
>Can you do vertical-align bottom in a div or only really in a table?

You can set it on inline level elements to move them relative to the
line they're on. But if you want the effect of a box with a set height
that contains another box at the bottom of it, use positioning. Set the
outer box to position: relative (or position: absolute), and the inner
box to position: absolute with bottom: 0px.

You set position on the outer box just to make it the containing block
for the inner box (i.e. the block the inner box is 0px from the bottom
of).

Using relative rather than absolute on the outer box keeps it "in the
normal flow".

ive just done this for a div containing a form (drop down list thing) and it
works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
bottom - anyway around this?
i am currently testing my page in all other (browser/op) combinations with
browsershots.org/ so may have to return again for more help ho hum.
-
Ben C

Registered User

2006-10-31 05:16:00 PM

Re:vertical-align

On 2006-10-31, password <fatpipe@epiptaf.com>wrote:
Quote

"windandwaves" <nfrancken@gmail.com>wrote in message
news:1162152786.223593.238380@b28g2000cwb.googlegroups.com...
Quote

Ben C wrote:
>On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
>>Hi Folk
>>
>>Can you do vertical-align bottom in a div or only really in a table?
>
>You can set it on inline level elements to move them relative to the
>line they're on. But if you want the effect of a box with a set height
>that contains another box at the bottom of it, use positioning. Set the
>outer box to position: relative (or position: absolute), and the inner
>box to position: absolute with bottom: 0px.
>
>You set position on the outer box just to make it the containing block
>for the inner box (i.e. the block the inner box is 0px from the bottom
>of).
>
>Using relative rather than absolute on the outer box keeps it "in the
>normal flow".

ive just done this for a div containing a form (drop down list thing) and it
works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
bottom - anyway around this?
It's probably just a margin-- try adding margin-bottom: 0 to the form.
-
password

Registered User

2006-11-01 06:28:00 AM

Re:vertical-align

"Ben C" <spamspam@spam.eggs>wrote in message
Quote
On 2006-10-31, password <fatpipe@epiptaf.com>wrote:
Quote

"windandwaves" <nfrancken@gmail.com>wrote in message
news:1162152786.223593.238380@b28g2000cwb.googlegroups.com...
>
>Ben C wrote:
>>On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
>>>Hi Folk
>>>
>>>Can you do vertical-align bottom in a div or only really in a
table?
Quote
>>
>>You can set it on inline level elements to move them relative to the
>>line they're on. But if you want the effect of a box with a set
height
Quote
>>that contains another box at the bottom of it, use positioning. Set
the
Quote
>>outer box to position: relative (or position: absolute), and the
inner
Quote
>>box to position: absolute with bottom: 0px.
>>
>>You set position on the outer box just to make it the containing
block
Quote
>>for the inner box (i.e. the block the inner box is 0px from the
bottom
Quote
>>of).
>>
>>Using relative rather than absolute on the outer box keeps it "in the
>>normal flow".
>
ive just done this for a div containing a form (drop down list thing)
and it
Quote
works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at
the
Quote
bottom - anyway around this?

It's probably just a margin-- try adding margin-bottom: 0 to the form.
ah i shall try that.. in my ignorance i thought bottom:0px was refering to
the margin.
-
password

Registered User

2006-11-01 06:31:00 AM

Re:vertical-align

"password" <fatpipe@epiptaf.com>wrote in message
Quote

"Ben C" <spamspam@spam.eggs>wrote in message
news:slrneke4vk.n6.spamspam@bowser.marioworld...
Quote
On 2006-10-31, password <fatpipe@epiptaf.com>wrote:
>
>"windandwaves" <nfrancken@gmail.com>wrote in message
>news:1162152786.223593.238380@b28g2000cwb.googlegroups.com...
>>
>>Ben C wrote:
>>>On 2006-10-28, windandwaves <nfrancken@gmail.com>wrote:
>>>>Hi Folk
>>>>
>>>>Can you do vertical-align bottom in a div or only really in a
table?
Quote
>>>
>>>You can set it on inline level elements to move them relative to
the
Quote
>>>line they're on. But if you want the effect of a box with a set
height
Quote
>>>that contains another box at the bottom of it, use positioning. Set
the
Quote
>>>outer box to position: relative (or position: absolute), and the
inner
Quote
>>>box to position: absolute with bottom: 0px.
>>>
>>>You set position on the outer box just to make it the containing
block
Quote
>>>for the inner box (i.e. the block the inner box is 0px from the
bottom
Quote
>>>of).
>>>
>>>Using relative rather than absolute on the outer box keeps it "in
the
Quote
>>>normal flow".
>>
>ive just done this for a div containing a form (drop down list thing)
and it
Quote
>works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at
the
Quote
>bottom - anyway around this?

It's probably just a margin-- try adding margin-bottom: 0 to the form.

ah i shall try that.. in my ignorance i thought bottom:0px was refering to
the margin.

sir, you are a star, thankyou. it works perfectly.
-