display not working as expected in FF

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

On Nov 28, 10:26 am, DonO <don.or... (AT) gmail (DOT) com> wrote:
[...]

// THE JAVASCRIPT PART

// show_hide.js
function show_hide(inShowItems, inHideItems){
if(inShowItems != ''){
var sItems = inShowItems.split(",");
for (i = 0; i < sItems.length; i++)

Don't let counters be global:

for (var i = 0; i < sItems.length; i++)

{ eval("document.getElementById('"+sItems[i]+"').style.display=''"); }

It has nothing to do with your problem, but using eval like that is
very inefficient and completely unnecessary, use:

document.getElementById(sItems[i]).style.display = '';

<URL: http://www.jibbering.com/faq/#FAQ4_40 >


--
Rob

On Nov 28, 8:40 am, RobG <rg... (AT) iinet (DOT) net.au> wrote:

On Nov 28, 10:26 am, DonO <don.or... (AT) gmail (DOT) com> wrote:
[...]

// THE JAVASCRIPT PART

// show_hide.js
function show_hide(inShowItems, inHideItems){
if(inShowItems != ''){
var sItems = inShowItems.split(",");
for (i = 0; i < sItems.length; i++)

Don't let counters be global:

for (var i = 0; i < sItems.length; i++)

{ eval("document.getElementById('"+sItems[i]+"').style.display=''"); }

It has nothing to do with your problem, but using eval like that is
very inefficient and completely unnecessary, use:

document.getElementById(sItems[i]).style.display = '';

URL:http://www.jibbering.com/faq/#FAQ4_40

--
Rob

Thanks for the suggestions. I'm far from a JS master, so any advice is
appreciated. I'm annoyed by the original problem b/c it used to work
fine in FF. I did a bunch of CSS edits yesterday and am afraid
something is just stepping on something else. When I put alerts in the
JS it seems to work fine, and I don't get any errors using the FF
WebDeveloper extension...

Anyhow... appreciate the help.

D.

On Nov 27, 6:26 pm, DonO <don.or... (AT) gmail (DOT) com> wrote:

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…</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;

}

Found a way to get it to work...

In the CSS I changed....

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

to...

#leftNav .buttonQuickLinks {
display:block; width:190px;
background: url(/_images/button_quicklinks.gif) no-repeat;
}
#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;
}

By splitting the a. part out of the same listing as the <li> and only
putting the height on the anchor it seems to work in both IE 6 and FF
2.x. These are the main ones I'm testing on now b/c our intranet
standard is IE 6, but I prefer to use FF for development and then
"make it work".

Thanks RobG for the other suggestions. I implemented them in the JS as
well.