WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: UL spacing on side navigation

for

Number of posts in this thread: 6 (In chronological order)

From: Leesa Lavigne
Date: Wed, Mar 17 2004 4:49PM
Subject: UL spacing on side navigation
No previous message | Next message →

Hi,

I uploaded just a basic page with the side navigation include file.

You can view it here: http://www.loveitsimple.com/MHA/SideNavTest.php See
how the links are all crammed together instead of having a line space
between them?

If you look at the source code you will see the break tags as so:
<li><a href="AdManagement/Register.php">Create an account</a><br></li>

Bit strange. I like to leave my site's text as default with a text resizer
link on the page so I'm not using px, ems, or any other size. I did try the
bottom margin setting in CSS but when not set just right (I tried it with %
values) the links can overlap each other.

The break tag normally gives me the spacing that I like even if CSS is
turned off on a visitors browser. Not sure why it's not showing the space
on the page. I used CSS for the -3 for the left margin so the links would
sit to the right like normal links would. I also used the style=none to get
rid of the bullets. Those, along with the hover background color, work so I
know the CSS is working.

Thanks. Leesa

Web Design Solutions tailor made to fit your unique needs.
Leesa Lavigne
Visit: http://www.LoveItSimple.com
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =

From: Tim Beadle
Date: Thu, Mar 18 2004 1:43AM
Subject: Re: UL spacing on side navigation
← Previous message | Next message →

On Wed, Mar 17, 2004 at 06:40:29PM -0500, Leesa Lavigne wrote:
> If you look at the source code you will see the break tags as so:
> <li><a href="AdManagement/Register.php">Create an account</a><br></li>
>
> Bit strange. I like to leave my site's text as default with a text resizer
> link on the page so I'm not using px, ems, or any other size. I did try the
> bottom margin setting in CSS but when not set just right (I tried it with %
> values) the links can overlap each other.
>
> The break tag normally gives me the spacing that I like even if CSS is
> turned off on a visitors browser. Not sure why it's not showing the space
> on the page. I used CSS for the -3 for the left margin so the links would
> sit to the right like normal links would. I also used the style=none to get
> rid of the bullets. Those, along with the hover background color, work so I
> know the CSS is working.

Leesa,

An excerpt from your stylesheet:

LI.NavigationLI {
list-style-type : none;
}

UL.NavigationLI {
list-style-type : none;
margin-left : -3px;
}

*But* in your HTML the only element with the NavigationLI class is the UL. If
you want to style the LI elements within that UL, you need a descendant
selector:

UL.NavigationLI LI {
/* Insert list item styles here, e.g.: */
margin: 1em 0 0 0;
}

One other thing: An LI is a block element by default. If you tell it to be
inline (using display: inline) and then set display: block on the link within
the LI [1]; you then maximise the clickable area of the link; i.e. the whole
box becomes clickable, not just the text. This is good for motor-impaired
users.

HTH,

Tim

[1] UL.NavigationLI LI A {
display: block;
/* apply all other visual styles here, not to the LI */
}
--
"On my way to the office I passed an old lady who appeared to be muttering to
herself, and it struck me: I can no longer tell the difference between insane
people, and people on hands-free mobile phones. Literally. I have no idea if
she was on the phone or not." - Ian Hickson


----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


From: julian.rickards@ndm.gov.on.ca
Date: Thu, Mar 18 2004 6:27AM
Subject: RE: UL spacing on side navigation
← Previous message | Next message →

I am surprised that:

li {margin-bottom: 1em} /* or something similar */

did not work. You could try

li {line-height: 2em} /* assuming li font-size is 1em */

Jules

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 17, 2004 6:40 PM
To: = EMAIL ADDRESS REMOVED =
Subject: UL spacing on side navigation


Hi,

I uploaded just a basic page with the side navigation include file.

You can view it here: http://www.loveitsimple.com/MHA/SideNavTest.php
<http://www.loveitsimple.com/MHA/SideNavTest.php>; See how the links are
all crammed together instead of having a line space between them?

If you look at the source code you will see the break tags as so:
<li><a href="AdManagement/Register.php">Create an account</a><br></li>

Bit strange. I like to leave my site's text as default with a text resizer
link on the page so I'm not using px, ems, or any other size. I did try the
bottom margin setting in CSS but when not set just right (I tried it with %
values) the links can overlap each other.

The break tag normally gives me the spacing that I like even if CSS is
turned off on a visitors browser. Not sure why it's not showing the space
on the page. I used CSS for the -3 for the left margin so the links would
sit to the right like normal links would. I also used the style=none to get
rid of the bullets. Those, along with the hover background color, work so I
know the CSS is working.

Thanks. Leesa

Web Design Solutions tailor made to fit your unique needs.
Leesa Lavigne
Visit: <http://www.loveitsimple.com/>; http://www.LoveItSimple.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 1:01 AM
To: = EMAIL ADDRESS REMOVED =
Subject: webaim-forum-d Digest V2004 #52




----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/


From: dfraser
Date: Thu, Mar 18 2004 7:19AM
Subject: RE: UL spacing on side navigation
← Previous message | Next message →

An excellent article on this subject can be found at

http://www.alistapart.com/articles/taminglists/

Regards

David

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: 18 March 2004 13:15
To: = EMAIL ADDRESS REMOVED =
Subject: RE: UL spacing on side navigation

I am surprised that:

li {margin-bottom: 1em} /* or something similar */

did not work. You could try

li {line-height: 2em} /* assuming li font-size is 1em */

Jules

---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



-----Original Message-----
From: Leesa Lavigne [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 17, 2004 6:40 PM
To: = EMAIL ADDRESS REMOVED =
Subject: UL spacing on side navigation


Hi,

I uploaded just a basic page with the side navigation include file.

You can view it here: http://www.loveitsimple.com/MHA/SideNavTest.php
<http://www.loveitsimple.com/MHA/SideNavTest.php>; See how the links are
all crammed together instead of having a line space between them?

If you look at the source code you will see the break tags as so:
<li><a href="AdManagement/Register.php">Create an account</a><br></li>

Bit strange. I like to leave my site's text as default with a text resizer
link on the page so I'm not using px, ems, or any other size. I did try the
bottom margin setting in CSS but when not set just right (I tried it with %
values) the links can overlap each other.

The break tag normally gives me the spacing that I like even if CSS is
turned off on a visitors browser. Not sure why it's not showing the space
on the page. I used CSS for the -3 for the left margin so the links would
sit to the right like normal links would. I also used the style=none to get
rid of the bullets. Those, along with the hover background color, work so I
know the CSS is working.

Thanks. Leesa

Web Design Solutions tailor made to fit your unique needs.
Leesa Lavigne
Visit: <http://www.loveitsimple.com/>; http://www.LoveItSimple.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 16, 2004 1:01 AM
To: = EMAIL ADDRESS REMOVED =
Subject: webaim-forum-d Digest V2004 #52




----
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: Emanuele Calo'
Date: Thu, Mar 18 2004 8:47AM
Subject: E-Health usability and accessibility
← Previous message | Next message →

Hi,
I come immediately to the then:
to design the user experience of a web application or of a portal in Health Care Service,
requires of face very
stimulating specific problems.
For example a first problem is the migration from legacy interfaces ([mainframe],
[client-server]) to web interfaces.
Other peculiarity is:
1. a low competency's users to IT, both sanitary users and citizens
2. labeling problems derive from the medical-sanitary terminology together with the
bureaucratic-administrative terminology.
3.trust -based interaction (web credibility)
4.protection of the privacy
5.access only by the use of the keyboard or by technologies like screen reader.
6.in some cases the users is an operator that must interact with the UI together to the
patient, who is there to give the necessary information for the transaction (for example
the
booking of the checkup).
7. translation in an application step-by-step of bureaucratic procedures like
those of the booking of checkup.

Do you have any experiences as to this subject?
Can you show me any fonts, studies, searches, or any other material on the
question, please?
Best regards!

Emanuele Cal

From: Leesa Lavigne
Date: Thu, Mar 18 2004 8:29PM
Subject: RE: UL spacing on side navigation
← Previous message | No next message

Thanks everyone!

Works Slick. You can view the results here:
http://www.loveitsimple.com/MHA/SideNavTest.php

I posted Tim & David's replies on the page for easy reference. I
remember the http://www.alistapar