Webmaster Forum / HTML, CSS, Scripts / CSS / November 2007

I'm not sure why this has stopped working in Firefox, but continues to
work in IE. I'm hoping it will be something obvious to one of you....

What should happen is when someone clicks the top "button" which is
using the "sliding doors" CSS technique and is one of a series of
<li>'s, the <div> containing a bulleted list of sub-links should show
up. At the bottom of the list is a "Collapse" link to hide the div.
The buttons should move down to accomodate the space needed to display
the links in the DIV. As I said, it does what I want in IE, but in FF
it looked like nothing happened until I broke the path to the images
under the first one. Then I saw it was actually displaying the div
behind the other button level <li> items, and was NOT moving them down
to display its contents.

Hope that makes sense.

There are three parts... the html, which is part of a PHP include, the
javascript that does the "show/hide" and the CSS. I'm including chunks
of all three since it's on our intranet and I can't link to it b/c of
firewall issues.

Thanks for any help.
D.

<!-- THE HTML PART -->

<div id="buttons">
<ul>
<!-- Quick Links Button -->
<li class="buttonQuickLinks">
  <a href="#" onclick="show_hide('quickLinkOptions',''); return
false;" class="button">test</a>
  <div id="quickLinkOptions" style="display:none;">
  <ul>
    <li><a href="#">Help Desk/Contacts</a></li>
    <li><a href="#">Order HW/SW</a></li>
    <li><a href="#">How To&#0133;</a></li>
    <li><a href="#">Marketing Materials</a></li>
  </ul>
  <a href="#" onclick="show_hide('','quickLinkOptions'); return
false;">Collapse</a>
  </div>
</li>

<!--  Directory Button -->
<li class="buttonDirectory"><a href="/Company/Directory/"
class="button"></a></li>

<!-- Whistleblower Button -->
<li class="buttonWhistleblower"><a href="#" class="button"></a></li>

<!--  Website Button -->
<li class="buttonWebsite"><a href="#" class="button"
target="_newWin"></a></li>
</ul>
</div>

// THE JAVASCRIPT PART

// show_hide.js
function show_hide(inShowItems, inHideItems){
 if(inShowItems != ''){
   var sItems = inShowItems.split(",");
   for (i = 0; i < sItems.length; i++)
{ eval("document.getElementById('"+sItems[i]+"').style.display=''"); }
 }

 if(inHideItems != ''){
   var hItems = inHideItems.split(",");
    for (i = 0; i < hItems.length; i++)
{ eval("document.getElementById('"+hItems[i]
+"').style.display='none'"); }
 }
}

/* THE CSS PART */

/* left nav */

#leftNav {
    float: left;
    width: 195px;
}

#leftNav ul {
    list-style:none;
    border-top:1px solid #ccc;
    width:192px;
}
#leftNav li {
    font:12px Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    border-bottom: 1px solid #ccc;
    width:192px;
}
#leftNav li.on {
    background:#ccc;
    border-top:solid 1px #aaa;
    border-bottom:solid 1px #aaa;
}
#leftNav ul.sideNavLinks {
    margin:40px 0 5px 0;
}

*html #leftNav ul.sideNavLinks {margin:50px 0 5px 0;}

#leftNav ul.sideNavLinks li a{
    text-decoration:none;
    padding: 5px 0 5px 5px;
    width:97%;
    display:block;
    color:#666;
    border-right:none;
}
#leftNav ul.sideNavLinks a:hover{
    text-decoration:none;
    padding: 5px 0 5px 5px;
    width:97%;
    display:block;
    background: #FDC82F;
    color:#ff9;
    border-right:2px solid #333;
}
#leftNav #buttons ul {
    list-style:none;
    float: left;
}
#leftNav #buttons li {
    border:none;
    float: left;
}
#leftNav #quickLinkOptions{
    margin-bottom:5px;
    text-align:center;
}
#leftNav #quickLinkOptions ul {
    list-style:none;
    margin:0 0 8px 5px;
    border:none;
    text-align:left;
    width:180px;
}
#leftNav #quickLinkOptions li {
    background: url(/_icons/icon_arrow.gif) no-repeat 0 7px;
    padding: 3px 0 3px 12px;
    width:168px;
}
#leftNav #stockInfoOptions  {
    margin-bottom:5px;
    text-align:center;
}
#leftNav #stockInfoOptions strong {
    color:#5B8F22;
}
#leftNav #stockInfoOptions ul {
    list-style:none;
    margin:0 0 8px 5px;
    border:none;
    text-align:left;
}
#leftNav #stockInfoOptions li {
    padding: 3px 0 3px 5px;
}

/* nav buttons */

#leftNav .buttonQuickLinks, #leftNav .buttonQuickLinks a.button {
    display:block; width:190px; height:30px;
    background: url(/_images/button_quicklinks.gif) no-repeat;
}
#leftNav .buttonQuickLinks a.button:hover {
    background-position: -190px 0;
}

#leftNav .buttonDirectory, #leftNav .buttonDirectory a.button {
    display:block; width:190px; height:30px;
    background: url(/_images/button_directory.gif) no-repeat;
}
#leftNav .buttonDirectory a.button:hover {
    background-position: -190px 0;
}

#leftNav .buttonWhistleblower, #leftNav .buttonWhistleblower a.button
{
    display:block; width:190px; height:30px;
    background: url(/_images/button_whistle.gif) no-repeat;
}
#leftNav .buttonWhistleblower a.button:hover {
    background-position: -190px 0;
}

#leftNav .buttonWebsite, #leftNav .buttonWebsite a.button {
    display:block; width:190px; height:30px;
    background: url(/_images/button_website.gif) no-repeat;
}
#leftNav .buttonWebsite a.button:hover {
    background-position: -190px 0;
}