vertical-align

Sub titulo Re: vertical-align
scripsit GTalbot:

I am going to suggest you, like Dorayme has already twice, to avoid
using line-height: you should *not* be using line-height anywhere at
all in your webpage. I have been coding and creating webpages since
1997 and I have never used line-height and do not intend to.

On the very contrary, authors should _routinely_ include a rule like
* { line-height: 1.3; }
using a suitable value (a unitless number, which here by definition is a
value with the current font size as its implied unit). The value should
be selected so that it is reasonable for the font(s) suggested by the
author; typically, 1.3 is OK for Arial, and for serif fonts, you might
use a somewhat smaller value. And naturally you need to consider the
effect of different font suggestions, overriding this basic rule as
appropriate for individual elements.

The default for line-height is not defined in CSS specifications, the
"suggested" values are quite different in differents specs, the browser
defaults vary (and are largely undocumented), and one line-height cannot
fit all fonts. This is a good reason to set it.

One of the most common simple flaws (not so simple to see, obviously,
but simple to fix) on web pages is the use of a sans-serif font with
large x-height and with a fairly large text width (line length). Unless
line-height is set to a reasonable value, the text lines are too close
to each other, for readability and for esthetics. If Verdana (gasp) or
Tahoma is used, you may even see descenders slashing some ascenders and
diacritic marks on the next line.

Another argument is that there are many bugs in IE 6 regarding line-
height and there are some still left in IE 7 regarding line-height.

Like what?

In reality, the rule I suggest (with any reasonable value - the specific
value does not matter here) is a powerful weapon against some nasty IE
bugs (which have nothing to do with line-height, really; this just
happens to work against them).

But, of course, line-height is not a reasonable way to deal with
vertical alignment! (_If_ you use vertical-align, then you _may_ need to
consider line-height issues with special care, but that's a different
story.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article <cDnkj.283176$QC3.193059 (AT) reader1 (DOT) news.saunalahti.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

Sub titulo Re: vertical-align
scripsit GTalbot:

I am going to suggest you, like Dorayme has already twice, to avoid
using line-height: you should *not* be using line-height anywhere at
all in your webpage. I have been coding and creating webpages since
1997 and I have never used line-height and do not intend to.

On the very contrary, authors should _routinely_ include a rule like
* { line-height: 1.3; }
using a suitable value (a unitless number, which here by definition is a
value with the current font size as its implied unit). The value should
be selected so that it is reasonable for the font(s) suggested by the
author;...

This is fair enough and an interesting point which you have made
before and not something I have ever forgotten (amazingly). But I
am sure you would not disagree that people should be *careful*
about jumping in to various bits of the CSS and setting
line-height and especially setting it with a unit (the OP used
px) to try to solve some problem.

--
dorayme

Hy Gérard

I went to your site. The least we can say is that IE should be banished from
the web. Another demonstration of Billy's will to dominate. But that's
another discussion.

The effect I want to realize is to make the link text behave like a button.
When pressed it shifts down a bit but I don't want to use images. Just a
slight shift with a color and backcolor change maybe and underlining should
give the effect of a pressed button. Other effects could be applied on
hovering etc.

I first applied a line-height and vertical-align to LI because IE would not
react to any vertical commands, so it was a try that I forgot to remove
afterwards.

<snip>
..menu UL, footer UL{margin:0px;padding:0;text-align:center;float:right; }
..menu LI, .footer LI{display:inline; padding:0px 4px;height:1.3em}
..menu A, .footer
A{position:relative;text-decoration:none;color:#000;outline-style:
none;line-height:25px;}
..menu A:hover, .footer A:hover{top:.3em;}
</snip>

now works in FF and OP but still not in IE.

Is there a workaround on that for IE ?

Thanks

Bill wrote:

Hy Gérard

I went to your site. The least we can say is that IE should be banished from
the web. Another demonstration of Billy's will to dominate. But that's
another discussion.

The effect I want to realize is to make the link text behave like a button.
When pressed it shifts down a bit but I don't want to use images.

I've done this in the past by setting borders.

Think of the visually, the effect of up and down is caused by lighting.

Styles shown inline:

<div style="border: 2px solid #888; border-color: #eee #222 #222
#eee;background-color: #999;width: 6em;display: inline;text-align:
center">up</div>
<div style="border: 2px solid #888; border-color: #222 #eee #eee
#222;background-color: #777;width: 10em;display: inline;text-align:
center">down</div>

The use of display: inline is not kosher, you'll want to do it elsewise

Jeff


Just a

slight shift with a color and backcolor change maybe and underlining should
give the effect of a pressed button. Other effects could be applied on
hovering etc.

I first applied a line-height and vertical-align to LI because IE would not
react to any vertical commands, so it was a try that I forgot to remove
afterwards.

snip
.menu UL, footer UL{margin:0px;padding:0;text-align:center;float:right; }
.menu LI, .footer LI{display:inline; padding:0px 4px;height:1.3em}
.menu A, .footer
A{position:relative;text-decoration:none;color:#000;outline-style:
none;line-height:25px;}
.menu A:hover, .footer A:hover{top:.3em;}
/snip

now works in FF and OP but still not in IE.

Is there a workaround on that for IE ?

Thanks

Hi Jeff

I did something alike but the main change was to use strict dtd instead of
transitional. Now it works in all browsers.

My css for that is
<snip>
..menu, .footer, .wrap {margin-left:165px; }
..menu UL, footer UL{margin:0px;padding:0;float:right; }
..menu LI, .footer LI{display:inline; padding:0px 4px;}
..menu A, .footer A{padding:0
..1em;position:relative;text-decoration:none;color:#000;outline-style: none;
border-right:1px solid #fff}
..menu A:hover, .footer
A:hover{top:.2em;background-color:#F2F2F2;border-right:1px solid
#606060;border-bottom:1px solid #606060}
</snip>

I was working with kwirks mode and loose dtd as IE understands almost
anything but standards but it was aparently a mistake.

Thanks

Hi Gérard

I was obsessed by that, well maybe not as much as that but anyway, yesterday
I modified my css to add some visual to the links and changed something in
the header.

Since IE understands almost anything but standards, I was working in kwirks
mode, I changed to strict and everything worked as intended.

Now, some effects for selected and active and it will be like I wanted. And
no see-saw images, no JS, and no hits on the server although a rocking
switch effect should be visually interesting, but ...

Updated but not definitive http://nrap.selfip.com

Thanks

On 19 jan, 09:16, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Sub titulo Re: vertical-align

On the very contrary, authors should _routinely_ include a rule like
* { line-height: 1.3; }
using a suitable value (a unitless number, which here by definition is a
value with the current font size as its implied unit). The value should
be selected so that it is reasonable for the font(s) suggested by the
author; typically, 1.3 is OK for Arial, and for serif fonts, you might
use a somewhat smaller value. And naturally you need to consider the
effect of different font suggestions, overriding this basic rule as
appropriate for individual elements.

[snipped]


Jukka,

I barely had time to skim over your post. I will reply to it a bit
later. Swamped with things to do. And IE 8 with that compatibility
switch..

Regards,

Gérard