E-mail List Archives
Thread: Using UL for links
Number of posts in this thread: 6 (In chronological order)
From: Leesa Lavigne
Date: Tue, Mar 16 2004 9:31PM
Subject: Using UL for links
No previous message | Next message →
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
From: Jukka K. Korpela
Date: Tue, Mar 16 2004 9:49PM
Subject: Re: Using UL for links
← Previous message | Next message →
On Tue, 16 Mar 2004, Leesa Lavigne wrote:
> 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).
You can use margin properties, e.g.
ul li { margin-bottom: 0.5em; }
Note that this adds a margin below the last item too, so you might wish to
set margin-bottom: 0 for it.
> Any suggestions? I did try putting a break tag right before each /LI
> tag but that didn't work.
The <br> tag means 'line break', and browsers have different
interpretations of what this means in different context. For a list item,
which itself implies line breaks before and after (by default), the
natural interpretation is that <br> before </li> has no effect.
People have often used <p> before </li>, which means using an empty
paragraph, but this is clumsy and coarse, has unpredictable effects in
general, and is explicitly frowned upon in HTML specifications.
So it's much better to use CSS.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Michael D. Roush
Date: Tue, Mar 16 2004 9:50PM
Subject: Re: Using UL for links
← Previous message | Next message →
Give your <li> items a specific bottom margin. The default is a single line space.
If you are using an external stylesheet or a <style>...</style> tag in the head of the document, try inserting something like this....
li { margin-bottom: 1.5ex; }
If you want to use something inline just on those specific line items.....
<li style="margin-bottom: 1.5ex;">List item is here.</li>
This should leave the line spacing for individual line items that wrap unaffected.
Michael
----- Original Message -----
From: Leesa Lavigne
To: = EMAIL ADDRESS REMOVED =
Sent: Tuesday, March 16, 2004 11:22 PM
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 li
From: Paul Bohman
Date: Tue, Mar 16 2004 10:04PM
Subject: Re: Using UL for links
← Previous message | Next message →
To increase the vertical space between list elements, try adding either
padding or margin space to the top and/or bottom of each <li> item:
.liststyle
{
padding-top: 2px;
padding-bottom: 2px;
}
...
<li class="liststyle">list item here</li>
...
The choice of padding or margin space is up to you. If you have a
background color already defined in the style for the <li> element, and
if you don't want a gap, then use padding. Using margin would create a
gap in the background color, but maybe that's an effect that you want.
There are other effects that your choice could have on your design, but
just try them out and see if one or the other works for you.
Leesa Lavigne wrote:
> 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).
--
Paul Ryan Bohman
Web Accessibility Specialist/Project Coordinator
WebAIM (Web Accessibility in Mind)
www.webaim.org
Center for Persons with Disabilities
www.cpd.usu.edu
Utah State University
www.usu.edu
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Terence de Giere
Date: Thu, Mar 18 2004 1:54PM
Subject: Re: Using UL for links
← Previous message | Next message →
I think this discussion of using undordered lists, the HTML UL element,
to organize links began with the problem of not using printing separator
characters between links, an accessibility guideline designed mostly for
legacy assistive technology. This is a Priority 3 World Wide Web
Consortium guideline:
"10.5 Until user agents (including assistive technologies) render
adjacent links distinctly, include non-link, printable characters
(surrounded by spaces) between adjacent links."
Note that this guideline does not just cover assistive technologies, but
browsers in general, and visual browsing as well.
Some browsers by default underline the links, some older browsers and
text browsers do not, some new graphical browsers do not, in which case
it might be hard to tell even visually where adjacent links begin and
end. How well the user can tell the text they are seeing, listening to
or feeling on a Braille terminal is a link depends on whether the user,
by looking or with the use of assistive technology can directly identify
a link or has to interpret or guess just what is printed on the screen.
Visually, most current graphical browsers by default underline links,
but this is not universal, and the user may need to set user settings to
underline links if they were not so coded using cascading style sheets.
Legacy screen readers (assuming left to right reading European languages
for this discussion) read left to right across the screen, then move
down to the 'next line' as they interpret where the 'next line' begins,
presumably based on the vertical spacing of characters on the left
margin of the page. Thus the greatest potential for non discrimination
of links is with links in a horizontal line where it may not be clear to
a visual user where the text for one link ends and another begins, and
the same is true for old screen readers. A true audio browser should
work fine, because an audio browser reads the HTML directly, rather than
indirectly as do older screen readers, and thus can clearly identify a
link. If the links are vertical, in a list or table, there should not be
nearly as much potential for confusion, unless the link text wraps to a
new line, in which case it may be indistinct to a visual user if the new
line is a new link or not, and the same for an older screenreader.
A non link printing spacer character such as vertical bar, a period,
left and right brackets, etc., between the links provides a method for
the user to visually or by reading with a screen reader in normal or
character mode, to determine where the next link begins. In default
presentation, browsers rendering a list will add a non link bullet
character, an asterisk, etc. before the link, although this character
may not be read in some assistive technology. If the list ends with a
link, and is immediately followed by a link, there will be no printing
spacer character.
There is also the question of what happens if the list bullet is
suppressed by CSS. using {list-style-type:none} The non link printing
character does not print to the screen. Thus if a link is formatted
using CSS from a vertical list to a horizontal row of links, and
suppressing the bullets, we now have a situation where there is no
printing character between adjacent links. An older screen reader used
with a recent CSS browser could in fact be in the same situation with
such a reformatted list as with a horizontal row of unseparated links.
The accessibility checking software sees a list so it thinks there is a
character there, but it is not actually checking for the character, it
just assumes that because it has identified a list.
Using CSS or even the deprecated font element, one can color a link
separator character (for graphical artistic reasons) to be the same
color as the background, which may affect some visual users who have
perception problems, but allows the character to be read by screen
readers because it is text that prints to the screen, and to show in non
CSS browsers. Putting borders etc, around the links can help visual
users keep them separate, amking them look like a row of buttons. This
visual CSS is not read by current assistive technology.
Note that Bobby version 5 will incorrectly miss printing spacer
characters between links if they are enclosed in another element, such
as SPAN, for example, to color the spacer character the same as the
background. If {display:none} is used to hide a printing character, the
character will render in non CSS technology and some older assistive
technology, but will effectively not be there with recent screen readers
that can interpret that CSS rule and not be there visually with CSS
competent browsers. One could position it off the screen using CSS, and
it will be read by some of these technologies, but not be seen.
Now, some assistive technology users are annoyed with spacer characters,
because they do not need them as their technology clearly identifies
links. For them listening to say, 'vertical bar' being spoken by the
reader between each links slows down browsing. If links are separated
with left and right brackets as is sometimes the case, it is even more
annoying for these users when these characters are read out, for
example, "left bracket link apple period computer period com right
bracket left bracket link ibm period com right bracket." Exactly how
these links are rendered, how the pucntuation is rendered and so on, is
a function of the speech engine and the assistive technology reading
mode. Some are more human usability centered than others when it comes
to reading text.
The intent of this guideline seems to be to provide a means for both
visual and non visual users to be able to unambiguously identify
adjacent links, and it is clear that each of the potential solutions
might not be ideal for every user, that accessibilty checking software
is not sophisticated enough, and that the main problem for users will be
with a horizontal row of links that are not clearly worded, clearly
spaced, clearly formatted, and with links that wrap to more than one line.
Terence de Giere
= EMAIL ADDRESS REMOVED =
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Tim Beadle
Date: Fri, Mar 19 2004 2:37AM
Subject: Re: Using UL for links
← Previous message | No next message
On Thu, Mar 18, 2004 at 03:45:46PM -0500, Terence de Giere wrote:
> I think this discussion of using undordered lists, the HTML UL element,
> to organize links began with the problem of not using printing separator
> characters between links, an accessibility guideline designed mostly for
> legacy assistive technology. This is a Priority 3 World Wide Web
> Consortium guideline:
It's also the forwards-looking design community's trend towards using
semantic/structured markup and CSS. A menu is, after all, a list of links.
Tim
--
"Internet Explorer is like a box of chocolates. You never know what you're
gonna get." -- Sjors
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/