Hi -
I've been experimenting with ALA's suckerfish menu. In my draft version, I'm unable to get rid of a block of color on the right side of the drop down menu. Can someone please look at my (feeble) coding and figure out what I've inserted and/or omitted that causes this problem?
Thanks,
KDLA
----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#nav {font-family: verdana, arial, sans-serif; font-size: 85%; background-color: #004455;}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li a {background-color: #004455; color: white;}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color: #004455;
}
#nav li ul li {
font-size: 85%;
background-color: #004455;
}
#nav li ul li.bottom {
border-bottom: 0;
}
#nav li ul li a {
background-color: #ffffff;
color: black;
border-top: 0 solid #004455;
border-right: 1px solid #004455;
border-left: 1px solid #004455;
border-bottom: 1px solid #004455;
padding: 2px 4px;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<h1>KDLA 2004-2005 Annual Report</h1>
<div style="width: 800px; height: 18px; background-color: #004455; padding: 10px;">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Customer Service</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Summer Reading</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">State Library</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Catalog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Partnership with Friends of Kentucky Public Archives</a></li>
<li class="bottom"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Talking Books</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Technology</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Catalog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Interlibrary Loan</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Digitization</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Scanning</a></li>
<li class="bottom"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Website</a></li>
</ul>
</li>
</ul></div>
<div style="clear: left;">
<h1>Heading 1 Example</h1>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<h2>Heading 2 Example</h2>
<p>Paragraph Example with Links: Lorem ipsum dolor sit amet, <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">consetetur
sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lorem ipsum dolor sit amet</a>.</p>
<h3>Heading 3 Example</h3>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Don't you have it as a link?Oops -
Here: <!-- m --><a class="postlink" href="http://kdla.ky.gov/_test/dropdown-test.htm">http://kdla.ky.gov/_test/dropdown-test.htm</a><!-- m -->
KDLARemove font-size: 85%; from #nav li ul li
Add font-size: 85%; width:100%; to #nav li ul li aDanke Schein, Fang!
I've been experimenting with ALA's suckerfish menu. In my draft version, I'm unable to get rid of a block of color on the right side of the drop down menu. Can someone please look at my (feeble) coding and figure out what I've inserted and/or omitted that causes this problem?
Thanks,
KDLA
----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#nav {font-family: verdana, arial, sans-serif; font-size: 85%; background-color: #004455;}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li a {background-color: #004455; color: white;}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color: #004455;
}
#nav li ul li {
font-size: 85%;
background-color: #004455;
}
#nav li ul li.bottom {
border-bottom: 0;
}
#nav li ul li a {
background-color: #ffffff;
color: black;
border-top: 0 solid #004455;
border-right: 1px solid #004455;
border-left: 1px solid #004455;
border-bottom: 1px solid #004455;
padding: 2px 4px;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<h1>KDLA 2004-2005 Annual Report</h1>
<div style="width: 800px; height: 18px; background-color: #004455; padding: 10px;">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Customer Service</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Summer Reading</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">State Library</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Catalog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Partnership with Friends of Kentucky Public Archives</a></li>
<li class="bottom"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Talking Books</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Technology</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Catalog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Interlibrary Loan</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Digitization</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Scanning</a></li>
<li class="bottom"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Website</a></li>
</ul>
</li>
</ul></div>
<div style="clear: left;">
<h1>Heading 1 Example</h1>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<h2>Heading 2 Example</h2>
<p>Paragraph Example with Links: Lorem ipsum dolor sit amet, <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">consetetur
sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Lorem ipsum dolor sit amet</a>.</p>
<h3>Heading 3 Example</h3>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>Don't you have it as a link?Oops -
Here: <!-- m --><a class="postlink" href="http://kdla.ky.gov/_test/dropdown-test.htm">http://kdla.ky.gov/_test/dropdown-test.htm</a><!-- m -->
KDLARemove font-size: 85%; from #nav li ul li
Add font-size: 85%; width:100%; to #nav li ul li aDanke Schein, Fang!