line-height in wrapped text

[Frostillicus]

I'm having difficulty creating a menu on the left of a web page where each
link appears to have a 4px padding around the edge but I'm trying to do this
as a pure unordered list. The "current web page" is just a line item without
a hyperlink and the stylesheet takes care of everything.

I thought I had everything fine and dandy after doing this: #menu li {
line-height: 22px; } as seen in this example:
http://marc.fearby.com/line-height.html but as soon as the text wraps to a
second line, the unsightly effect is a large gap between the two lines.

I then thought about using padding settings here and there but this just
didn't work. I tried #menu li a { padding-bottom: 4px; } which is fine for
list items that contain hyperlinks, but not for ordinary list items. As soon
as I try doing this for ordinary list items, they look fine at the expense
of those with hyperlinks. Example with inline style here:
http://marc.fearby.com/padding.html

I can't fix one up without ruining the other and I can't employ negative
margins which I used to get around this same problem for the margin-left (or
at least I haven't got it to work yet, unfortunately).

Is such a thing possible with just bare-bones lists and hyperlinks or am I
going to have to use divs for east list item and fine some way to make it
work with extra tags? I sure hope not...

[Els]

Frostillicus wrote:

I'm having difficulty creating a menu on the left of a web
page where each link appears to have a 4px padding around
the edge but I'm trying to do this as a pure unordered
list. The "current web page" is just a line item without
a hyperlink and the stylesheet takes care of everything.

I thought I had everything fine and dandy after doing this:
#menu li { line-height: 22px; } as seen in this example:
http://marc.fearby.com/line-height.html but as soon as the
text wraps to a second line, the unsightly effect is a
large gap between the two lines.

I then thought about using padding settings here and there
but this just didn't work. I tried #menu li a {
padding-bottom: 4px; } which is fine for list items that
contain hyperlinks, but not for ordinary list items. As
soon as I try doing this for ordinary list items, they look
fine at the expense of those with hyperlinks. Example with
inline style here: http://marc.fearby.com/padding.html

I can't fix one up without ruining the other and I can't
employ negative margins which I used to get around this
same problem for the margin-left (or at least I haven't got
it to work yet, unfortunately).

Is such a thing possible with just bare-bones lists and
hyperlinks or am I going to have to use divs for east list
item and fine some way to make it work with extra tags? I
sure hope not...

Only one extra tag and one extra styleblock to go with the tag
:-)

http://locusmeus.com/temp/frostillicus.html

Is that what you were looking for? I sort of got lost in all
the paddings and pixels in your story...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

Frostillicus wrote:

I'm having difficulty creating a menu on the left of a web
page where each link appears to have a 4px padding around
the edge but I'm trying to do this as a pure unordered
list. The "current web page" is just a line item without
a hyperlink and the stylesheet takes care of everything. [...] Is such a thing possible with just bare-bones lists and
hyperlinks or am I going to have to use divs for east list
item and fine some way to make it work with extra tags? I
sure hope not...

Only one extra tag and one extra styleblock to go with the
tag
:-)

http://locusmeus.com/temp/frostillicus.html

Is that what you were looking for? I sort of got lost in
all the paddings and pixels in your story...

Oh, and btw, get rid of pt for font-size, use percentages, so IE
users can resize them too.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Stephen Poley]

On Thu, 19 Aug 2004 22:46:45 +1000, "Frostillicus"
<fr****@nilspamos.iinet.net.au> wrote:

I'm having difficulty creating a menu on the left of a web page where each
link appears to have a 4px padding around the edge but I'm trying to do this
as a pure unordered list. The "current web page" is just a line item without
a hyperlink and the stylesheet takes care of everything.

I thought I had everything fine and dandy after doing this: #menu li {
line-height: 22px; } as seen in this example:
http://marc.fearby.com/line-height.html but as soon as the text wraps to a
second line, the unsightly effect is a large gap between the two lines. I then thought about using padding settings here and there but this just
didn't work. I tried #menu li a { padding-bottom: 4px; } which is fine for
list items that contain hyperlinks, but not for ordinary list items. As soon
as I try doing this for ordinary list items, they look fine at the expense
of those with hyperlinks. Example with inline style here:
http://marc.fearby.com/padding.html

#menu li { padding-bottom: 4px; } would work fine, except that you
seem to have confused things by specifying a background-color in "#menu
li a" instead of "#menu li". If you want a different background colour
in the cell corresponding to the current page you'll need a class on
that cell, but I suggest that a contrasting foreground colour would be
as good, if not better.

Actually it would probably look better with (a) padding all the way
around, and (b) padding in ems, so it is proportional to the text size.
Soemthing like #menu li { padding: 0.3em; }

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Frostillicus]

I guess I got carried away in trying to keep the HTML as bare-bones as
possible, and when I view the page without the stylesheet, I like having the
current page appear as just an ordinary list-item and no hyperlink, but as
els has suggested, I guess I just gotta put a class in there and use a
hyperlink to achieve what I want.

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:ft********************************@4ax.com...

#menu li { padding-bottom: 4px; } would work fine, except that you
seem to have confused things by specifying a background-color in "#menu
li a" instead of "#menu li". If you want a different background colour
in the cell corresponding to the current page you'll need a class on
that cell, but I suggest that a contrasting foreground colour would be
as good, if not better.

Actually it would probably look better with (a) padding all the way
around, and (b) padding in ems, so it is proportional to the text size.
Soemthing like #menu li { padding: 0.3em; }

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Els]

Frostillicus wrote:

I guess I got carried away in trying to keep the HTML as
bare-bones as possible, and when I view the page without
the stylesheet, I like having the current page appear as
just an ordinary list-item and no hyperlink, but as els has
suggested, I guess I just gotta put a class in there and
use a hyperlink to achieve what I want.

No, not a hyperlink, just an <a> element.

And you'll have to check my code to see how exactly it works,
but disabling the styles for my pages, leaves the current menu
item not underlined, as it's not a link.

It just helps to code all menu items the same way.
I did it myself with the menu on my own site, couldn't find
another method to get them divided all evenly.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Mr. Big - Green-tinted Sixties Mind

[Frostillicus]

Thanks, Els. The only thing I had to do was specify a padding-top so that IE
didn't render the page with the text all scrunched up at the top. It looked
perfectly OK in Firefox, but, as usual, we have to cater for IE sadly.

Thanks for your help!

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...

Els wrote:
Oh, and btw, get rid of pt for font-size, use percentages, so IE
users can resize them too.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Els wrote:

Frostillicus wrote:

I'm having difficulty creating a menu on the left of a web

[snip]

25 lines of quoted material (not including blank lines)...
Only one extra tag and one extra styleblock to go with the tag

[snip]

5 lines of new material, one with only an emoticon. Not a very good s/n
radio, Els.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Els]

Brian wrote:

Not a very good s/n radio, Els.

Not a very good spelling, Brian ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Skid Row - 18 and Life (Live in Knoxville 91)

[Brian]

Els wrote:

Brian wrote:

Not a very good s/n radio, Els.

Not a very good spelling, Brian ;-)

Touché.[1] It's the field I used to work in; I inquired about a radio
job this week, so it's fresh on my mind. Plus, s/n ratio is quite
related to radio equipment.

[1] You're still not off the hook for excessive quoting! :-p

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Els]

Brian wrote:

Els wrote:

Brian wrote:

Not a very good s/n radio, Els.
Not a very good spelling, Brian ;-)

Touché.[1] It's the field I used to work in; I inquired
about a radio job this week, so it's fresh on my mind.

Are you getting the job?
Plus, s/n ratio is quite related to radio equipment.
Weak. Very weak argument. <g>
[1] You're still not off the hook for excessive quoting!
:-p

That's okay ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Els wrote:

Brian wrote:

I inquired about a radio job this week

Are you getting the job?

Extremely unlikely.

Plus, s/n ratio is quite related to radio equipment.

Weak. Very weak argument. <g>

Aww! And I was rather pleased with that connection!

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/