Off-Left Replacement for Display:None

[fleemo17]

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;
}

[kchayka]

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.