E-mail List Archives
Thread: More Info on Using UL for links question
Number of posts in this thread: 8 (In chronological order)
From: Leesa Lavigne
Date: Tue, Mar 16 2004 10:15PM
Subject: More Info on Using UL for links question
No previous message | Next message →
The break tag works in line items on a regular html page. My side
navigation is in an include file using php with DreamWeaver. For some
reason the break tag does not work. When you view the code you can see the
break tag just before the end line item tag. Can't figure out why it isn't
showing the extra blank line. The other CSS properties are working with
the include file. Thanks. Leesa
-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:22 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Using UL for links
Hi,
I just tried using the UL for side links and like it except for one
thing that you might be able to help me with. I would like more vertical
spacing between each link. I couldn't find a CSS attribute that worked just
between the line items and not between e
From: Sonja Ray
Date: Tue, Mar 16 2004 10:19PM
Subject: Re: More Info on Using UL for links question
← Previous message | Next message →
You can use css to assign a bottom margin for the LI items:
li {margin-bottom:12px;}
I use this all the time. It works a dream.
--
Sonja Ray
----
Be careful when playing under the anvil tree.
-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:22 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Using UL for links
Hi,
I just tried using the UL for side links and like it except for one
thing that you might be able to help me with. I would like more vertical
spacing between each link. I couldn't find a CSS attribute
From: Jukka K. Korpela
Date: Tue, Mar 16 2004 10:28PM
Subject: Re: More Info on Using UL for links question
← Previous message | Next message →
On Wed, 17 Mar 2004, Sonja Ray wrote:
> li {margin-bottom:12px;}
>
> I use this all the time. It works a dream.
Not quite. When the font size is 9px, it creates an unnecessarily large
gap. When the font size is 90px, it's too small. And if your page also
sets font size in pixels, then that's even worse - and users who are
forced to make their browser override all of the author's font size
settings will hardly override the margin-bottom setting.
Use em, Luke. Stay away from the px side.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Tim Harshbarger
Date: Tue, Mar 16 2004 11:30PM
Subject: RE: More Info on Using UL for links question
← Previous message | Next message →
Lisa,
What does your CSS and the related HTML look like?
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:07 PM
To: = EMAIL ADDRESS REMOVED =
Subject: More Info on Using UL for links question
The break tag works in line items on a regular html page. My side
navigation is in an include file using php with DreamWeaver. For some
reason the break tag does not work. When you view the code you can see the
break tag just before the end line item tag. Can't figure out why it isn't
showing the extra blank line. The other CSS properties are working with
the include file. Thanks. Leesa
-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:22 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Using UL for links
Hi,
I just tried using the UL for side links and like it except for one
thing that you might be able to help me with. I would like more vertical
spacing between each link. I couldn't find a CSS attribute that worked just
between the line items and not between every line (incase one link wrapped
to two lines).
Any suggestions? I did try putting a break tag right before each /LI
tag but that didn't work.
Thanks. Leesa
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: lists
Date: Tue, Mar 16 2004 11:40PM
Subject: RE: More Info on Using UL for links question
← Previous message | Next message →
you can use margin, padding or line-height. Whichever one you choose depends
upon your target browsers. you might want to walk through some of these
tutorials.
http://www.w3schools.com
chris
-----Original Message-----
From: Tim Harshbarger [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 10:22 PM
To: ' = EMAIL ADDRESS REMOVED = '
Subject: RE: More Info on Using UL for links question
Lisa,
What does your CSS and the related HTML look like?
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:07 PM
To: = EMAIL ADDRESS REMOVED =
Subject: More Info on Using UL for links question
The break tag works in line items on a regular html page. My side
navigation is in an include file using php with DreamWeaver. For some
reason the break tag does not work. When you view the code you can see the
break tag just before the end line item tag. Can't figure out why it isn't
showing the extra blank line. The other CSS properties are working with
the include file. Thanks. Leesa
-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 11:22 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Using UL for links
Hi,
I just tried using the UL for side links and like it except for one
thing that you might be able to help me with. I would like more vertical
spacing between each link. I couldn't find a CSS attribute that worked just
between the line items and not between every line (incase one link wrapped
to two lines).
Any suggestions? I did try putting a break tag right before each /LI
tag but that didn't work.
Thanks. Leesa
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Sonja Ray
Date: Wed, Mar 17 2004 5:52AM
Subject: Re: More Info on Using UL for links question
← Previous message | Next message →
Sorry, I thought it would be fairly clear that one should adjust the number
of pixels specified in the bottom margin according to the size of the fonts
on your page.
If your font are 90px(!) you could specify a bottom margin of 90px, or
100px, or whatever. If the font size if 9px, you could specify a bottom
margin of 6 or 8 px.
You can also specify the margin in points, percentages, ems and several
other units. Pick your poison.
--
Sonja Ray
----
"It is sobering to reflect that one of the best ways to get yourself
a reputation as a dangerous citizen these days is to go about repeating
the very phrases which our founding fathers used in the struggle for
independence." -- Charles A. Beard
> From: "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = >
> Reply-To: = EMAIL ADDRESS REMOVED =
> Date: Wed, 17 Mar 2004 07:19:42 +0200 (EET)
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: More Info on Using UL for links question
> Resent-From: = EMAIL ADDRESS REMOVED =
> Resent-Date: Tue, 16 Mar 2004 22:19:45 -0700
>
> On Wed, 17 Mar 2004, Sonja Ray wrote:
>
>> li {margin-bottom:12px;}
>>
>> I use this all the time. It works a dream.
>
> Not quite. When the font size is 9px, it creates an unnecessarily large
> gap. When the font size is 90px, it's too small. And if your page also
> sets font size in pixels, then that's even worse - and users who are
> forced to make their browser override all of the author's font size
> settings will hardly override the margin-bottom setting.
>
> Use em, Luke. Stay away from the px side.
>
> --
> Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
>
>
> ----
> To subscribe, unsubscribe, suspend, or view list archives,
> visit http://www.webaim.org/discussion/
>
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Tim Beadle
Date: Wed, Mar 17 2004 6:03AM
Subject: Re: More Info on Using UL for links question
← Previous message | Next message →
On Wed, Mar 17, 2004 at 07:43:49AM -0500, Sonja Ray wrote:
> If your font are 90px(!) you could specify a bottom margin of 90px, or
> 100px, or whatever. If the font size if 9px, you could specify a bottom
> margin of 6 or 8 px.
You're right, but that only covers the font size as set by you, the designer.
Users can, and do, change their font size from the default (e.g. ctrl+/ctrl- in
mozilla/ns6+). Your defaults won't mean anything when the font size changes.
Sizing in em or ex means that the margin's size will change with the font size.
This is A Good Thing.
See www.brainjar.com for an example (change your font size and watch the column
width change proportionally).
Also see http://alistapart.com/articles/elastic/ for an article on the general
principle.
Regards,
Tim
--
"Remember: When you buy music you're helping lawyers sue 12 year old girls."
-- Alex Grant
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Jukka K. Korpela
Date: Wed, Mar 17 2004 11:02AM
Subject: Re: More Info on Using UL for links question
← Previous message | No next message
On Wed, 17 Mar 2004, Sonja Ray wrote:
> Sorry, I thought it would be fairly clear that one should adjust the number
> of pixels specified in the bottom margin according to the size of the fonts
> on your page.
It's a wrong approach anyway.
> If your font are 90px(!) you could specify a bottom margin of 90px, or
> 100px, or whatever. If the font size if 9px, you could specify a bottom
> margin of 6 or 8 px.
If I need 90px or 9px, I will probably not worry about setting margins on
a per-page page for my viewing. But I _will_ observe the effects of
settings by authors who play with px sizes.
> You can also specify the margin in points, percentages, ems and several
> other units. Pick your poison.
And some of these are acceptable for accessibility, some are not.
So why did you suggest the inaccessible approach on the WabAim list?
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/