Padding property for <A>

[Eric]

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.

I checked a couple of other browsers and couldn't find any that
implemented top and bottom padding for the <A> element, assuming I have
done it correctly.

#bar A
{
padding:10px 10px 10px 10px
}

Just choose px units at random.

Any comments? Is my book wrong?

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[Spartanicus]

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]

Spartanicus <[e-mail]> wrote:

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.

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

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

Thank you.

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[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]

Eric <eg*************@verizon.net> 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?

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.

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


--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[Eric]

Spartanicus <[e-mail]> wrote:

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.

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

http://w3.org

Yes, I am aware of w3.org and there is a *ton* of information there. I
was hoping to obtain a more specific URL which would have provided me
with the information that the top and bottom padding does not behave in
the way I expected for the <A> element.

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[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]

Spartanicus <[e-mail]> 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 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.

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[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

[Lauri Raittila]

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.

[David Graham]

"Eric" <eg*************@verizon.net> wrote in message
news:1g3sxl6.1tye0q3tirq5xN%eg*************@verizo n.net...

Spartanicus <[e-mail]> 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

[Eric]

David Graham <da************@ntlworld.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.

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.
******* Shows the overlap
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New Page</title>
<style type="text/css">
</style>
</head>
<body>
<a href=# style="background: green;border: 3px solid blue;padding:20px
20px 20px 20px;">This is some link
text</a><br>
<a href=# style="line-height: 1.7;background: green;border: 3px solid
blue">This is some link text</a>
</body>
</html>

******* No Overlap
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New Page</title>
<style type="text/css">
</style>
</head>
<body>
<a href=# style="line-height: 5.0; background: green;border: 3px solid
blue;padding:20px 20px 20px 20px;">This is some link
text</a><br>
<a href=# style="line-height: 1.7;background: green;border: 3px solid
blue">This is some link text</a>
</body>
</html>

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[Steve Pugh]

eg*************@verizon.net (Eric) wrote:

David Graham <da************@ntlworld.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 <st***@pugh.net> <http://steve.pugh.net/>

[Eric]

Steve Pugh <st***@pugh.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?

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===

[Steve Pugh]

Steve Pugh <st***@pugh.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 <st***@pugh.net> <http://steve.pugh.net/>

[Steve Pugh]

eg*************@verizon.net (Eric) wrote:

Steve Pugh <st***@pugh.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 <st***@pugh.net> <http://steve.pugh.net/>