Re: Padding property for <A>

Eric wrote:

According to my book, the padding property is defined for all elements.
However, when I set the property for the element <A>, only the left the
right padding is applied and not the top and bottom padding.

Top and bottom padding is applied on the font height (not line height)
of linked text. Also applies if the hyperlinked content is not text like
an image IIRC.

--
Spartanicus

Eric wrote:

Top and bottom padding is applied on the font height (not line height)
of linked text. Also applies if the hyperlinked content is not text like
an image IIRC.

Unfortunately, I am at a loss then on how to make this work. Do you have
suggestions?

Make what work?

Also, do you have a URL for where the above information can be found?

http://w3.org

--
Spartanicus

Eric wrote:

well, I believe I found the answer to this question. Setting the
line-height property to 1.2 for the <A> element appears to provide me
with the behavior I want.

Wrong, as I've said before it's applied on the _font_ height, _not_ the
line height.

I am curious about the reason why the top and bottom padding does not
work the way I expected it to.

Because your expectations are wrong.

--
Spartanicus

Eric wrote:

line-height:1.2;

1.2 what, apples, monkey noodles?

I am curious about the reason why the top and bottom padding does not
work the way I expected it to.

Because your expectations are wrong.

That much is obvious.

If you described what it is that you were expecting we may be able to
set you straight. The group's crystal ball is out on loan again, and we
have forgotten who has it.

--
Spartanicus

In article Spartanicus wrote:

Eric wrote:

line-height:1.2;

1.2 what, apples, monkey noodles?

Just 1.2 is enaugh.
http://www.w3.org/TR/CSS21/visudet.h...ef-line-height
http://www.w3.org/TR/CSS21/syndata.h...lue-def-number




--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

"Eric" <egDfAusenetE5fz (AT) verizon (DOT) net> wrote

Spartanicus <me (AT) privacy (DOT) net> wrote:

Eric wrote:

well, I believe I found the answer to this question. Setting the
line-height property to 1.2 for the <A> element appears to provide me
with the behavior I want.

Wrong, as I've said before it's applied on the _font_ height, _not_ the
line height.

Perhaps I wasn't clear...I am no longer using the padding property.

Only the line-height property, which apparently will do what I need it
to do, which is to provide some extra spacing between links on adjacent
lines.

Specifically,

#GameNavigationBar A
{
line-height:1.2;
}


If you have another concrete solution to this problem, I would be
interested in learning about it.

I have put a test page at

http://p0c79.phpwebhosting.com/~p0c79/test117.html
The padding on the first link seems to behave as I would expect and the
line-height is also behaving OK. Is this not what you see. (tested in IE6,
Mozilla 1.4 and Opera 7.1
HTH
David

egDfAusenetE5fz (AT) verizon (DOT) net (Eric) wrote:

David Graham <david.graham18 (AT) ntlworld (DOT) com> wrote:

I have put a test page at
http://p0c79.phpwebhosting.com/~p0c79/test117.html
The padding on the first link seems to behave as I would expect and the
line-height is also behaving OK. Is this not what you see. (tested in IE6,
Mozilla 1.4 and Opera 7.1

Try putting a <br> after the first 'This is some link text' and remove
the line-height:3.0 from it as well.

I think you will see that the second 'This is some link text' overlaps
with the first...at least it does for me under mozilla 1.5, IE 5.2.3 and
Safari.

and Opera 7.21 and IE6...

However, by putting the line-height property back into the first one,
the second one now appears below the first with no overlap.

So, the true problem might be that while the padding is being applied,
what should appear below overlaps. Looks like a bug to me.

A bug in all CSS supporting browsers? That's rather unlikely. I think
the problem is that you don't understand how inline elements are
treated by CSS.

<span style="padding:20px"> ... lots of text ... </span>

Imagine this is one long line of text, written out on a ticker tape
for example.
Now apply 20px padding to all sides of it, this makes the ticker tape
bigger.
Now chop the ticker tape up into lots of smaller pieces so that they
will wrap and fit into the width of the browser window.
Place these smaller chunks so that they are separated by the distance
specified in the line-height style.

There's your overlap.

It also explains why the left and right padding, and indeed the left
and right borders only appear at the start and end of the element, not
at the start and end of each line, but the top and bottom
padding/border appears on each line.

If you add padding to an inline element you must adjust the
line-height property accordingly. In most cases you could (and should)
just use line-height on its own.

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 (AT) pugh (DOT) net> <http://steve.pugh.net/>

Steve Pugh <steve (AT) pugh (DOT) net> wrote:

It also explains why the left and right padding, and indeed the left
and right borders only appear at the start and end of the element, not
at the start and end of each line,

Except of course in IE...

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 (AT) pugh (DOT) net> <http://steve.pugh.net/>

egDfAusenetE5fz (AT) verizon (DOT) net (Eric) wrote:

Steve Pugh <steve (AT) pugh (DOT) net> wrote:

If you add padding to an inline element you must adjust the
line-height property accordingly. In most cases you could (and should)
just use line-height on its own.

Is it possible to make sure that the line-height is only large enough to
encompass an element with padding and no larger?

Not 100% precisely but you can get very close if you set the padding
in em.

Then set the line height to 1.2 + top padding + bottom padding.

padding: 1em;
line-height: 3.2em;

Works precisely in Opera 7.21, very close in Netscape 7.1 and IE6.
(i.e. the top and bottom borders of adjacent lines are in the same
place in Opera and so appear as a single pixel, whilst in IE and
Mozilla they appear adjacent to each other giving a two pixel line.)

I suppose if you set font-size in pixels you could set padding in
pixels as well, but let's not open that can of worms yet again.

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 (AT) pugh (DOT) net> <http://steve.pugh.net/>