468,103 Members | 1,225 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,103 developers. It's quick & easy.

Off-Left Replacement for Display:None

For increased accessibility, I've replaced "display:none" with the
Off-Left method of hiding my CSS drop-down menus because the Jaws
screen reader doesn't see any of the menus hidden with "display:none".
The Off-Left method (placing elements way over to the left beyond the
browser window) seems to work well in everything except IE 6 for the
PC, where it displays the drop-downs about an inch to the right of
where they should be. (View
http://www.sunriveronline.org/clrn/elrTEST.html with IE to see it in
action.)

How can I go about scooting the drop-down menus over to the left where
they should be in IE without messing it up in other browsers? The code
for my navigation bar is shown below. I suspect the problem has
something to do with the following IE workaround:

#nav li>ul {
top: auto;
left: auto;
}

Thanks in advance.

-Fleemo

------------------------------------------------

#nav {
padding: 0;
margin: 0;
position: absolute;
width: 877px;
top: 108px;
z-index: 1000;
white-space: nowrap;
}

#nav a {
font-size: .8em;
text-decoration: none;
padding-top: 6px;
font-weight: normal;
border-left: 1px solid #4B8EA6;
border-bottom: 1px solid #4B8EA6;
background-color: transparent;
}

#nav a:link { color: white; }
#nav a:visited { color: white; }
#nav a:hover { color: white; background-color: #0085CA; }

#nav ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav li li a {
display: block;
font-weight: normal;
color: #fff;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 10px;
background-color: #0085CA;
}

#nav li {
float: left;
position: relative;
width: 156px;
text-align: center;
cursor: default;
background-color: transparent;
list-style: none;
}

#nav li.homebttn {
float: left;
position: relative;
width: 66px;
text-align: center;
cursor: default;
background-color: transparent;
}

#nav li ul {
position: absolute;
top: 100%;
margin-left: -1999px;
font-weight: normal;
background-color: #1C6B8A;
padding: 0.5em 0 1em 0;
z-index: 10000;
}

#nav li>ul {
top: auto;
left: auto;
}

#nav li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

#nav li:hover ul, #nav li.over ul {
display: block;
margin-left: 0;
}

Sep 22 '05 #1
1 2089
fl******@comcast.net wrote:
For increased accessibility, I've replaced "display:none" with the
Off-Left method of hiding my CSS drop-down menus
http://www.sunriveronline.org/clrn/elrTEST.html with IE to see it in
action.)


View it in any browser with image loading disabled to see how accessible
it is then. Please keep in mind that accessibility is about much more
than just accomodating blind users.

All image-replacement methods are bad. Some are less bad than others,
but I don't think the off-left method is one of the lesser evils. If
you're not using transparent images and only trying to cover up a short
amount of text, the Gilder-Levin method may work. See also
<URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Sep 24 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Greg Raven | last post: by
12 posts views Thread by Ximo | last post: by
3 posts views Thread by noahlt | last post: by
2 posts views Thread by karen scheu via AccessMonster.com | last post: by
14 posts views Thread by Billy Patton | last post: by
10 posts views Thread by randomtalk | last post: by
8 posts views Thread by micklee74 | last post: by
reply views Thread by Corey Wallis | last post: by
5 posts views Thread by Barkster | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.