vertical-align...

[maya]

hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....
thank you very much..

[maya]

maya wrote:

hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....
thank you very much..

one note: padding-top is no good, as it ADDS to height of div...

thank you...

[Jonathan N. Little]

maya wrote:

maya wrote:

>hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....

No it should not.

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

"Applies to: inline-level and 'table-cell' elements"

A DIV is neither an inline-level or table-cell element. You could add to
div.module-header:

display: table-cell;

But don't expect IE support.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[maya]

Jonathan N. Little wrote:

maya wrote:

>maya wrote:

>>hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....

No it should not.

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

"Applies to: inline-level and 'table-cell' elements"

A DIV is neither an inline-level or table-cell element. You could add to
div.module-header:

display: table-cell;

But don't expect IE support.

oh my gosh.. I would LOVE to know why everybody prefers div-based
layouts.. with tables this is SO MUCH EASIER...

I will have to either do entire thing w/an image instead of text or do
w/tables...

oh brother.... ok.. thank you..

[Bergamot]

maya wrote:

Jonathan N. Little wrote:

>maya wrote:

>>maya wrote:

how do I get text to vertical-align inside a div?
http://www.mayacove.com/misc/home.html

vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

No it should not.

I will have to either do entire thing w/an image instead of text or do
w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping

-or-

Drop the fixed height and padding on the container div. Set the <a>
element to display:block, add some padding to all 4 sides, and set the
background-position: left center. This will handle line-wrapping as long
as the bg image is designed to handle it. Yours isn't now, but it can
easily be made to do so.

oh brother....

Quit whining

--
Berg
now killing all posts from google groups

[Nik Coughlin]

"maya" <ma********@yahoo.comwrote in message
news:48********@news.x-privat.org...

>
oh my gosh.. I would LOVE to know why everybody prefers div-based
layouts.. with tables this is SO MUCH EASIER...

I will have to either do entire thing w/an image instead of text or do
w/tables...

oh brother.... ok.. thank you..

No, you just haven't learnt enough about CSS yet:

http://nrkn.com/temp/maya/

[Nik Coughlin]

"Bergamot" <be******@visi.comwrote in message
news:48***********************@reader.usenet4all.s e...

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
maya wrote:
>
how do I get text to vertical-align inside a div?
http://www.mayacove.com/misc/home.html
>
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

No it should not.

I will have to either do entire thing w/an image instead of text or do
w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping

-or-

Drop the fixed height and padding on the container div. Set the <a>
element to display:block, add some padding to all 4 sides, and set the
background-position: left center. This will handle line-wrapping as long
as the bg image is designed to handle it. Yours isn't now, but it can
easily be made to do so.

Or a third way, using my solution (posted elsewhere in this thread), set
everything to em sizes (which match the pixel sizes at font-size 100%) and
use line-height to vertically center the text. Allow the size of the text
to control the size of the containing a and div elements. Allows for
text-resizing, unlike the OP's demo page.

[Bergamot]

Nik Coughlin wrote:

"Bergamot" <be******@visi.comwrote in message
news:48***********************@reader.usenet4all.s e...

>>
There's more than 1 way to
do this, such as:

Or a third way, using my solution

Note that I didn't imply those 2 solutions I posted were the only
possible alternatives. Nor is your solution so different from what I
described.

--
Berg
now killing all posts from google groups

[Nik Coughlin]

"Bergamot" <be******@visi.comwrote in message
news:48***********************@reader.usenet4all.s e...

Nik Coughlin wrote:

>"Bergamot" <be******@visi.comwrote in message
news:48***********************@reader.usenet4all. se...

>>>
There's more than 1 way to
do this, such as:

Or a third way, using my solution

Note that I didn't imply those 2 solutions I posted were the only
possible alternatives. Nor is your solution so different from what I
described.

Yes, don't worry, I wasn't trying to say that :) There are doubtless half a
dozen other variants too. Mine is an amalgam of your two methods with some
additional differences.

[dorayme]

In article <48********@news.x-privat.org>, maya <ma********@yahoo.com>
wrote:

hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....
thank you very much..

Perhaps you would be happy with text-align: center for your purposes.

Vertical-align is an inline affair and it is not inherited. Perhaps this
will help to see the situation a little.

<http://netweaver.com.au/alt/verticalAlign.html>

--
dorayme

[maya]

Bergamot wrote:

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
maya wrote:
how do I get text to vertical-align inside a div?
http://www.mayacove.com/misc/home.html
>
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html
No it should not.

I will have to either do entire thing w/an image instead of text or do
w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

I was responding to previous post in which (s)he offered a solution but
said "don't expect IE support...".. thank you...

[Jonathan N. Little]

maya wrote:

I was responding to previous post in which (s)he offered a solution but
said "don't expect IE support...".. thank you...

I, (Jonathan, a male name BTW), did not say it was the *only* solution.
Your approach could be different to give you similar results that
would not alienate the uncooperative IE browser.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[maya]

Bergamot wrote:

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
maya wrote:
how do I get text to vertical-align inside a div?
http://www.mayacove.com/misc/home.html
>
vertical-align should work, according to this:
http://htmlhelp.com/reference/css/te...cal-align.html
No it should not.

I will have to either do entire thing w/an image instead of text or do
w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping

this solution finally worked, learned something new, thank you very
much...:)

[maya]

maya wrote:

Bergamot wrote:

>maya wrote:

>>Jonathan N. Little wrote:
maya wrote:
maya wrote:
>how do I get text to vertical-align inside a div?
>http://www.mayacove.com/misc/home.html
>>
>vertical-align should work, according to this:
>http://htmlhelp.com/reference/css/te...cal-align.html
No it should not.
I will have to either do entire thing w/an image instead of text or
do w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

>Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping

this solution finally worked, learned something new, thank you very
much...:)

actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:
..test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">photo</div>
</div>
I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...

[Ben C]

On 2008-06-10, maya <ma********@yahoo.comwrote:
[...]

actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:
.test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">photo</div>
</div>
I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...

Don't forget that line-height is inherited. Try adding:

a.testLink { line-height: normal }

If the A has a line-height of 40px it doesn't get to move much when you
align it to the bottom of a 40px high line box.

[maya]

Ben C wrote:

On 2008-06-10, maya <ma********@yahoo.comwrote:
[...]

>actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:
.test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">photo</div>
</div>
I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...

Don't forget that line-height is inherited. Try adding:

a.testLink { line-height: normal }

If the A has a line-height of 40px it doesn't get to move much when you
align it to the bottom of a 40px high line box.

ok, took out line-height property for for the div that contains the
element I need to v-align at the bottom.. but it still doesn't work..
(I guess the line-height solution only works for v-align:middle..)

ok, so, again: how do I control vertical-align in css? I need to be
able to freely control vertical-align of an element (a <divor an <a)
to top, middle, or bottom, inside a div of a specific height.. have yet
to get the "final solution" here... you have to admit, css does have a
bit of a problem vertical-aligning elements.. I a see questions about
this all time here and in other places...

so have found solution vertical-align:middle.. have yet to find
solution for vertical-align bottom...

(my gosh, this really IS so much simpler in tables.. <td
valign="bottom"and voila -- all content of <tdis at the bottom..
why is this so hard with css? (I guess <div
style="vertical-align:bottom"would have been too simple...;)

thank you...

[Ben C]

On 2008-06-11, maya <ma********@yahoo.comwrote:

Ben C wrote:

>On 2008-06-10, maya <ma********@yahoo.comwrote:
[...]

>>actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:
.test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">photo</div>
</div>
I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...

Don't forget that line-height is inherited. Try adding:

a.testLink { line-height: normal }

If the A has a line-height of 40px it doesn't get to move much when you
align it to the bottom of a 40px high line box.

ok, took out line-height property for for the div that contains the
element I need to v-align at the bottom.. but it still doesn't work..

That's not what I was suggesting. Leave line-height: 40px on the div,
but set line-height: normal on the anchor inside it.

(I guess the line-height solution only works for v-align:middle..)

If you set a big line-height things end up vertically aligned anyway
because in CSS leading is divided into two, with half going above and
half below.

Vertical-align: middle may be a red herring-- things go in the middle
anyway if you just use a big line height.

ok, so, again: how do I control vertical-align in css?

Vertical-align on inline boxes is very confusing. But the trick to
getting things working is to set a big line-height on the containing
block, but then to set line-height _back to normal_ for the inline boxes
inside it. Then vertical-align will start to have more effect.

I need to be able to freely control vertical-align of an element (a
<divor an <a) to top, middle, or bottom, inside a div of a
specific height.. have yet to get the "final solution" here... you
have to admit, css does have a bit of a problem vertical-aligning
elements..

It is a bit of a nightmare. Vertical-align in a table cell is more
straightforward.

I a see questions about
this all time here and in other places...

so have found solution vertical-align:middle.. have yet to find
solution for vertical-align bottom...

(my gosh, this really IS so much simpler in tables.. <td
valign="bottom"and voila -- all content of <tdis at the bottom..
why is this so hard with css? (I guess <div
style="vertical-align:bottom"would have been too simple...;)

Much too simple :) You can always put display: table-cell on the div if
you don't need IE support.

[maya]

Ben C wrote:

On 2008-06-11, maya <ma********@yahoo.comwrote:

>Ben C wrote:

>>On 2008-06-10, maya <ma********@yahoo.comwrote:
[...]
actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:
.test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">photo</div>
</div>
I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...
Don't forget that line-height is inherited. Try adding:

a.testLink { line-height: normal }

If the A has a line-height of 40px it doesn't get to move much when you
align it to the bottom of a 40px high line box.

ok, took out line-height property for for the div that contains the
element I need to v-align at the bottom.. but it still doesn't work..

That's not what I was suggesting. Leave line-height: 40px on the div,
but set line-height: normal on the anchor inside it.

>(I guess the line-height solution only works for v-align:middle..)

If you set a big line-height things end up vertically aligned anyway
because in CSS leading is divided into two, with half going above and
half below.

Vertical-align: middle may be a red herring-- things go in the middle
anyway if you just use a big line height.

>ok, so, again: how do I control vertical-align in css?

Vertical-align on inline boxes is very confusing. But the trick to
getting things working is to set a big line-height on the containing
block, but then to set line-height _back to normal_ for the inline boxes
inside it. Then vertical-align will start to have more effect.

>I need to be able to freely control vertical-align of an element (a
<divor an <a) to top, middle, or bottom, inside a div of a
specific height.. have yet to get the "final solution" here... you
have to admit, css does have a bit of a problem vertical-aligning
elements..

It is a bit of a nightmare. Vertical-align in a table cell is more
straightforward.

>I a see questions about
this all time here and in other places...

so have found solution vertical-align:middle.. have yet to find
solution for vertical-align bottom...

(my gosh, this really IS so much simpler in tables.. <td
valign="bottom"and voila -- all content of <tdis at the bottom..
why is this so hard with css? (I guess <div
style="vertical-align:bottom"would have been too simple...;)

Much too simple :) You can always put display: table-cell on the div if
you don't need IE support.

of course I need IE support...;) (this is for a site I'm building at
work... (display: table-cell??) )

so are you saying there's no way to vertical-align:bottom with css? I
can't believe this... if this is true css is SORELY lacking here....

thank you...

[Ben C]

On 2008-06-11, maya <ma********@yahoo.comwrote:
[...]

so are you saying there's no way to vertical-align:bottom with css? I
can't believe this... if this is true css is SORELY lacking here....

Did you try my suggestion:

<div style="line-height: 100px; background-color: yellow">
<a style="line-height: normal; vertical-align: bottom" href="#">
Click here!
</a>
<a style="line-height: normal; vertical-align: top" href="#">
Or here!
</a>
<a style="line-height: normal; vertical-align: middle" href="#">
Or here!
</a>
</div>

The key thing here is line-height: normal on the A elements.

[maya]

Ben C wrote:

On 2008-06-11, maya <ma********@yahoo.comwrote:
[...]

>so are you saying there's no way to vertical-align:bottom with css? I
can't believe this... if this is true css is SORELY lacking here....

Did you try my suggestion:

<div style="line-height: 100px; background-color: yellow">
<a style="line-height: normal; vertical-align: bottom" href="#">
Click here!
</a>
<a style="line-height: normal; vertical-align: top" href="#">
Or here!
</a>
<a style="line-height: normal; vertical-align: middle" href="#">
Or here!
</a>
</div>

The key thing here is line-height: normal on the A elements.

thank you.. I just tried this: this is output:

http://www.mayacove.com/misc/test2.html

I need the div w/yellow background to be a specific height (say, 40px
for example, AND for the <ato be vertical-aligned at the bottom...)

I added height:100px to the div (2nd example on this page), then <awas
vertical-aligned to the top!!!

thank you..

[Ben C]

On 2008-06-11, maya <ma********@yahoo.comwrote:

Ben C wrote:

>On 2008-06-11, maya <ma********@yahoo.comwrote:
[...]

>>so are you saying there's no way to vertical-align:bottom with css? I
can't believe this... if this is true css is SORELY lacking here....

Did you try my suggestion:

<div style="line-height: 100px; background-color: yellow">
<a style="line-height: normal; vertical-align: bottom" href="#">
Click here!
</a>
<a style="line-height: normal; vertical-align: top" href="#">
Or here!
</a>
<a style="line-height: normal; vertical-align: middle" href="#">
Or here!
</a>
</div>

The key thing here is line-height: normal on the A elements.

thank you.. I just tried this: this is output:

http://www.mayacove.com/misc/test2.html

I need the div w/yellow background to be a specific height (say, 40px
for example, AND for the <ato be vertical-aligned at the bottom...)

I added height:100px to the div (2nd example on this page), then <awas
vertical-aligned to the top!!!

thank you..

You need strict mode, or line-height doesn't work on block level
elements (it's supposed to set a minimum height for line boxes).

Add this to the top of your test page:

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

and it works in Firefox.

[maya]

Ben C wrote:

On 2008-06-11, maya <ma********@yahoo.comwrote:

>Ben C wrote:

>>On 2008-06-11, maya <ma********@yahoo.comwrote:
[...]
so are you saying there's no way to vertical-align:bottom with css? I
can't believe this... if this is true css is SORELY lacking here....
Did you try my suggestion:

<div style="line-height: 100px; background-color: yellow">
<a style="line-height: normal; vertical-align: bottom" href="#">
Click here!
</a>
<a style="line-height: normal; vertical-align: top" href="#">
Or here!
</a>
<a style="line-height: normal; vertical-align: middle" href="#">
Or here!
</a>
</div>

The key thing here is line-height: normal on the A elements.

thank you.. I just tried this: this is output:

http://www.mayacove.com/misc/test2.html

I need the div w/yellow background to be a specific height (say, 40px
for example, AND for the <ato be vertical-aligned at the bottom...)

I added height:100px to the div (2nd example on this page), then <awas
vertical-aligned to the top!!!

thank you..

You need strict mode, or line-height doesn't work on block level
elements (it's supposed to set a minimum height for line boxes).

Add this to the top of your test page:

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

and it works in Firefox.

thank your for your response...

two problems:
1)it has to also work in IE; and:
2) at work we use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it's not working w/that one, in EITHER browser....
unbelievable.... a simple vertical-align: CSS REALLY needs improvement
here...
thank you very much for your help and your patience...

[Andreas Prilop]

On Wed, 11 Jun 2008, maya wrote:

2) at work we use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why?
I bet nobody at your work knows why.

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

[maya]

Andreas Prilop wrote:

On Wed, 11 Jun 2008, maya wrote:

>2) at work we use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why?
I bet nobody at your work knows why.

you might be right...;) I would try to convince them to use the other
one; however, it won't be of much use if what I'm trying to do only
works in FF...

thank you..

[Ben C]

On 2008-06-11, maya <ma********@yahoo.comwrote:

Ben C wrote:

[...]

>You need strict mode, or line-height doesn't work on block level
elements (it's supposed to set a minimum height for line boxes).

Add this to the top of your test page:

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

and it works in Firefox.

thank your for your response...

two problems:
1)it has to also work in IE; and:
2) at work we use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it's not working w/that one, in EITHER browser....

unbelievable.... a simple vertical-align: CSS REALLY needs improvement
here...

It's IE (and your clueless employers :) that need improving, not CSS.
CSS _does_ provide ways to do vertical-align, as discussed, and they
work in Firefox/Opera/other decent browsers.

It is a bit complex but it is there and it does work.

[maya]

Ben C wrote:

On 2008-06-11, maya <ma********@yahoo.comwrote:

>Ben C wrote:

[...]

>>You need strict mode, or line-height doesn't work on block level
elements (it's supposed to set a minimum height for line boxes).

Add this to the top of your test page:

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

and it works in Firefox.

thank your for your response...

two problems:
1)it has to also work in IE; and:
2) at work we use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it's not working w/that one, in EITHER browser....

unbelievable.... a simple vertical-align: CSS REALLY needs improvement
here...

It's IE (and your clueless employers :) that need improving, not CSS.
CSS _does_ provide ways to do vertical-align, as discussed, and they
work in Firefox/Opera/other decent browsers.

It is a bit complex but it is there and it does work.

I need it to work also in IE.. are you saying there's no way to make it
work in IE? regardless of doctype??? and why is THAT??? you have
to admit, a solution that doesn't work in IE is not very practical...
since you seem to think me and my employers are clueless, why don't you
enlighten us?? ;) HOW can I get a vertical-align:bottom to work in IE???

thank you very much....

[Ben C]

On 2008-06-11, maya <ma********@yahoo.comwrote:

Ben C wrote:

>On 2008-06-11, maya <ma********@yahoo.comwrote:

[...]

>>unbelievable.... a simple vertical-align: CSS REALLY needs improvement
here...

It's IE (and your clueless employers :) that need improving, not CSS.
CSS _does_ provide ways to do vertical-align, as discussed, and they
work in Firefox/Opera/other decent browsers.

It is a bit complex but it is there and it does work.

I need it to work also in IE.. are you saying there's no way to make it
work in IE? regardless of doctype??? and why is THAT???

IE doesn't support CSS so well, and using anything except the right
doctype puts you into quirks mode.

you have to admit, a solution that doesn't work in IE is not very
practical... since you seem to think me and my employers are clueless,
why don't you enlighten us?? ;) HOW can I get a
vertical-align:bottom to work in IE???

I don't know, and I don't have or want IE to try it on. It might be that
setting line-height on the block to give a minimum line box height is
the part that doesn't work-- that's the thing Firefox doesn't do in
quirks mode which could be a clue.

You could therefore try something like this:

<div style="background-color: yellow">
<span style="line-height:100px">
<a style="line-height: normal; vertical-align: bottom" href="#">
Click here!
</a>
</span>
</div>

But like I say, this is only a guess. If it doesn't work frob with
random style properties for a while then give up and use a table.

[Bergamot]

maya wrote:

>
you have to admit, css does have a
bit of a problem vertical-aligning elements..

I think the problem is just as much you wanting something to be pixel
perfect. It's an unreasonable expectation, so you're only setting
yourself up for disappointment. Until you learn how to look at things
with flexibility in mind, not just rigid fixed pixel dimensions, you'll
never get it.

Go look up CSS "sliding doors" for an example.

--
Berg
now killing all posts from google groups

[maya]

Bergamot wrote:

maya wrote:

>you have to admit, css does have a
bit of a problem vertical-aligning elements..

I think the problem is just as much you wanting something to be pixel
perfect. It's an unreasonable expectation, so you're only setting
yourself up for disappointment. Until you learn how to look at things
with flexibility in mind, not just rigid fixed pixel dimensions, you'll
never get it.

Go look up CSS "sliding doors" for an example.

ok, well, either way I want to thank everyone for their input and
suggestions.. it seems this is not an easy problem that merits more
research.. as for me wanting something "pixel-perfect", or me not
looking at things "with flexibility in mind", I'm a web developer, I
build websites at work, they hand me a photoshop mockup with the design
and I need to make it look exactly like the mockup.. and I always strive
to do as much as possible with CSS rather than with just plain HTML..

I don't think it's a failure on my part to "look at things with
flexibility in mind" that is the problem here; vertical-aligning an
element is a fairly simple concept, it's not rocket science...;) I
think there's no reason why it shouldn't be just as easy to
vertical-align elements inside another element in CSS as it is in plain
HTML tables....

thank you....

[Michael Wojcik]

maya wrote:

as for me wanting something "pixel-perfect", or me not
looking at things "with flexibility in mind", I'm a web developer, I
build websites at work, they hand me a photoshop mockup with the design
and I need to make it look exactly like the mockup..

Well, until your employers learn something about HTML, they are doomed
to disappointment, and you to frustration.

Trying to implement a fixed-layout mock-up or design comp in HTML is
like trying to mimic a statue. Sooner or later you'll have to move,
and so will your HTML layout. It's the wrong task for the medium.

I don't think it's a failure on my part to "look at things with
flexibility in mind" that is the problem here; vertical-aligning an
element is a fairly simple concept, it's not rocket science...;) I
think there's no reason why it shouldn't be just as easy to
vertical-align elements inside another element in CSS as it is in plain
HTML tables....

For the Nth time: the fault is not in CSS. CSS provides a way to do
what you want to do. You tell one implementation (Firefox) not to do
it, by using the Transitional doctype; and you complain that another
(IE) won't do it at all. How is that a failure in CSS? The W3C can't
force Microsoft's MSHTML team to fix their damn bugs.

You might as well blame thermodynamics for the poor mileage of your Ford.

--
Michael Wojcik
Micro Focus
Rhetoric & Writing, Michigan State University

[Roy A.]

On 28 Mai, 23:23, maya <[e-mail]:

hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html

vertical-align should work, according to this:http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....

The 'vertical-align' property applies to inline-level and 'table-cell'
elements and is *not inherited* as some people here seems to think.

<div style="line-height: 42px">...

won't work.

<http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

trigger standards mode in IE6, when you're not using an xml
declaration (but then you can only use utf-8 when served as
application/xhtml+xml or application/xml).

To center your link, try to add this to your code:

..module-header {position: relative}
..module-header a { position: absolute; line-height: 1.2em; margin-top:
-.6em; top: 50% }

To align your link at the bottom, something like this will work:

..module-header {position: relative}
..module-header a { position: absolute; line-height: 1.2em; bottom:
0 }

This won't work if your link span multiple lines.

If you add an extra div to your module-header:

<div class="module-header"><div><a href=""
class="sidebarLinkHeader">Categories</a></div></div>

then the following css should work:

..module-header {position: relative}
..module-header div { top: 50%; position: absolute }
..module-header a { position: relative; top: -50%; text-
decoration:none }

It works in Opera, IE6, IE7, but sadly not in a decent browser like
Firefox.

[Bergamot]

maya wrote:

>
they hand me a photoshop mockup with the design
and I need to make it look exactly like the mockup

Then they don't know much about web design and are merely setting you
and themselves up for disappointment and failure. Even if you do the old
image slice-and-dice layout table from that mockup, the design won't
adapt to variations in user settings and probably fall apart easily.
I've seen it countless times, and it will surely happen with that "must
be exactly 40px high" problem you posted. It's an arbitrary and
unrealistic limitation. I bet money that with my browser settings, it
would end up unusable.

You want to learn something? Go look up "sliding doors" like I already
told you. You *can* do what you want, just not the way you think it is
done. Your mind is stuck on pixel precision and you've got to get away
from that if you expect to have any success. Whoever is supplying you
with the design also needs to accept some realities about web media and
start allowing for user variations. Otherwise, you both fail.

--
Berg

[Ben C]

On 2008-06-13, Roy A. <ro*********@gmail.comwrote:

On 28 Mai, 23:23, maya <[e-mail]:

>hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html

vertical-align should work, according to this:http://htmlhelp.com/reference/css/te...cal-align.html

but it isn't....

The 'vertical-align' property applies to inline-level and 'table-cell'
elements and is *not inherited* as some people here seems to think.

<div style="line-height: 42px">...

won't work.

I don't know who thought vertical-align was inherited-- you are correct
it is isn't-- but line-height is inherited, and, in strict mode on
conforming browsers, sets a minimum height for line boxes in the block.

So you can move things up and down in their container by setting a big
line-height on the container, setting a smaller line-height on the
inline boxes inside it (to prevent them just inheriting the big one) and
then setting vertical-align on the inline boxes.

[...]

To center your link, try to add this to your code:

.module-header {position: relative}
.module-header a { position: absolute; line-height: 1.2em; margin-top:
-.6em; top: 50% }

To align your link at the bottom, something like this will work:

.module-header {position: relative}
.module-header a { position: absolute; line-height: 1.2em; bottom:
0 }

This won't work if your link span multiple lines.

Nor will the vertical-align method we were discussing earlier.

[maya]

Michael Wojcik wrote:

maya wrote:

>as for me wanting something "pixel-perfect", or me not looking at
things "with flexibility in mind", I'm a web developer, I build
websites at work, they hand me a photoshop mockup with the design and
I need to make it look exactly like the mockup..

Well, until your employers learn something about HTML, they are doomed
to disappointment, and you to frustration.

Trying to implement a fixed-layout mock-up or design comp in HTML is
like trying to mimic a statue. Sooner or later you'll have to move, and
so will your HTML layout. It's the wrong task for the medium.

this is the first I hear that my employers "don't know HTML" b/c they
want a site to look like the design they sent me.. sorry, don't follow
your line of thinking here.. (no, they don't know HTML, knowing HTML is
MY job, not theirs...)

and regarding doctype, yes I understood from a previous post that by
using one specific doctype it works in FF, but it's pretty useless if it
doesn't also work in IE..
I know I know, we all like to bach M$ and IE, but at work everything I
do has to work equally well in IE, FF, and Safari..

thank you...

>

>I don't think it's a failure on my part to "look at things with
flexibility in mind" that is the problem here; vertical-aligning an
element is a fairly simple concept, it's not rocket science...;) I
think there's no reason why it shouldn't be just as easy to
vertical-align elements inside another element in CSS as it is in
plain HTML tables....

For the Nth time: the fault is not in CSS. CSS provides a way to do what
you want to do. You tell one implementation (Firefox) not to do it, by
using the Transitional doctype; and you complain that another (IE) won't
do it at all. How is that a failure in CSS? The W3C can't force
Microsoft's MSHTML team to fix their damn bugs.

You might as well blame thermodynamics for the poor mileage of your Ford.

[maya]

Bergamot wrote:

maya wrote:

>they hand me a photoshop mockup with the design
and I need to make it look exactly like the mockup

Then they don't know much about web design and are merely setting you
and themselves up for disappointment and failure. Even if you do the old
image slice-and-dice layout table from that mockup, the design won't
adapt to variations in user settings and probably fall apart easily.
I've seen it countless times, and it will surely happen with that "must
be exactly 40px high" problem you posted. It's an arbitrary and
unrealistic limitation. I bet money that with my browser settings, it
would end up unusable.

You want to learn something? Go look up "sliding doors" like I already
told you. You *can* do what you want, just not the way you think it is
done. Your mind is stuck on pixel precision and you've got to get away
from that if you expect to have any success. Whoever is supplying you
with the design also needs to accept some realities about web media and
start allowing for user variations. Otherwise, you both fail.

yes, I will look @ the "sliding doors" thing you mentioned, don't know
what this is and AM curious.. however, at work, I have to make sites
look like designs they send me, still not sure why all of a sudden this
is such poor practice.. ok, again thanks to all for yr responses...

[Andreas Prilop]

On Fri, 13 Jun 2008, maya wrote:

>>they hand me a photoshop mockup with the design and
I need to make it look exactly like the mockup

at work, I have to make sites look like designs they send me,
still not sure why all of a sudden this is such poor practice..

It's like saying: "Make a movie that looks exactly like the novel."

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

[Jonathan N. Little]

maya wrote:

yes, I will look @ the "sliding doors" thing you mentioned, don't know
what this is and AM curious.. however, at work, I have to make sites
look like designs they send me, still not sure why all of a sudden this
is such poor practice.. ok, again thanks to all for yr responses...

Google "liquid layout"

Bottom line, as a designer you do not really have control to dictate the
size of the users font, or even what font they will use, what size their
view port is or at what resolution. You can make suggestions, but you
cannot force...use Flash if you want to ram it down the throats of your
users (and what some folks just "love" Flash). But there are ways to
design flexibly that give to the look, but not the constraints of a
fixed layout.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bergamot]

maya wrote:

>
at work, I have to make sites
look like designs they send me, still not sure why all of a sudden this
is such poor practice..

It's not "all of a sudden". HTML has always been a flexible medium. If
you really understood HTML you'd know that already. It's dee-ziners who
think it should behave the same as paper, and it's been proven over and
over again that pixel-perfect layouts are doomed to fail.

You can keep on believing that "must be 40px high" navigation menu is
never going to waver when someone like me, who needs large text for
readability, comes along. But you'll be wrong.

--
Berg

[GTalbot]

On 13 juin, 10:45, maya <[e-mail]:

I understood from a previous post that by
using one specific doctype it works in FF, but it's pretty useless if it
doesn't also work in IE..

This deserves another response. The fact that IE 6 and IE 7 have bugs
regarding line-height, vertical-align and inline box model over-
emphasizes the need for a flexible layout, for a non-rigid, non-over-
constrained layout. If your webpage is well thought up, then it will
still serve its purpose despite imperfect IE 6 & IE 7 browser
versions. Yes, maybe an element will be offset by 10px or misaligned
or there will be a gap here but not gap over there... but the content
will still be accessible, readable, viewable, reachable and that
matters a lot for users/visitors. The users' experience on a webpage
shouldn't be dramatically broken if a gap or an offset appears
somewhere in a webpage.

I know web authors who stopped trying to overcome and to work around
bugs in IE 6+, around flaws in CSS implementations in IE 6+, around
imperfect, incomplete, buggy implementations in IE6 and IE 7 and they
warn their users that their webpage is using valid markup code, valid
CSS code, triggers standards rendering mode and that *they* should
switch to a better browser. I know website who do just that:

Examples:

http://crimethinc.com/about/site_guide.html

http://hol.org.uk/4.0/blog.php?post=29

http://members.shaw.ca/jillianandryan/
(this one is excellent, well written)

http://www.gitaarensemble-alegria.be/

http://www.uni-graz.at/~katzer/engl/spice_technote.html

Here's a recent one which linked directly to my site:
http://www.mesposo.it/usa_firefox.php

There are even campains to drop/boycott/forget IE 6 ... for web users/
visitors and for web authors.

Gérard

[dorayme]

In article
<9a**********************************@e39g2000hsf. googlegroups.com>,
GTalbot <ne*******@gtalbot.orgwrote:

Here's a recent one which linked directly to my site:
http://www.mesposo.it/usa_firefox.php

A blank page shows up in my browsers.

--
dorayme

[Michael Wojcik]

maya wrote:

Michael Wojcik wrote:

>maya wrote:

>>as for me wanting something "pixel-perfect", or me not looking at
things "with flexibility in mind", I'm a web developer, I build
websites at work, they hand me a photoshop mockup with the design and
I need to make it look exactly like the mockup..

Well, until your employers learn something about HTML, they are doomed
to disappointment, and you to frustration.

Trying to implement a fixed-layout mock-up or design comp in HTML is
like trying to mimic a statue. Sooner or later you'll have to move,
and so will your HTML layout. It's the wrong task for the medium.

this is the first I hear that my employers "don't know HTML" b/c they
want a site to look like the design they sent me.. sorry, don't follow
your line of thinking here.. (no, they don't know HTML, knowing HTML is
MY job, not theirs...)

If they don't understand what the medium can be used for, they can't
sensibly specify exactly what you must do with it.

They're creating your assignments; it's their job to understand what
they're requiring. In this case, they're requiring something that is
impossible. That's their fault.

Suppose you were a wood mill operator, and your employer asked you to
create a board one inch by one inch by one hundred feet. That's not a
reasonable request *of the medium*, and if your employer didn't
understand that, it would fall on you to convey that, wouldn't it?

You are in the same situation here. Asking to implement a design
mock-up exactly in HTML indicates a fundamental misunderstanding of
what HTML does.

and regarding doctype, yes I understood from a previous post that by
using one specific doctype it works in FF, but it's pretty useless if it
doesn't also work in IE..

That is irrelevant to my point, which is that blaming CSS and the W3C
for IE's failings (which is what you had done in the message I
responded to) was incorrect.

Your first problem is that you have been assigned a task which cannot
be accomplished, at least as you have described it here. Your second
one is that you're failing to recognize what actually impedes you from
accomplishing it.

Blaming CSS and the W3C is factually incorrect. Blaming IE is correct
but useless, since you cannot force Microsoft to fix it, nor users to
adopt the fixed version (or some other browser). Blaming your
employers at least offers the hope (however faint) that they can be
made to see reason.

--
Michael Wojcik
Micro Focus
Rhetoric & Writing, Michigan State University