WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: UL spacing on side navigation

for

From: Tim Beadle
Date: Mar 18, 2004 1:43AM

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/