Nested <a> and <span> challenge: part 2 - javascript, IE8 and alignment

Question

Hi forum, I have two head-scratchers here: #1- IE8 not seeming to like my javascript; #2- a CSS alignment issue in all IE6 & 7s. Thanks so much for the various suggestions (to use javascript) on my last question - really helpful.

I have been able to get the double nested behaviour of the CSS-only page (see team.html in Firefox when you hit the live page below to see the non-validating html working beautifully) replicated with my first ever javascript as follows...

The live page is >[ here ]< - it works with firefox, chrome and at least loads in IE 6 & 7 according to some browsershots.org tests, but otherwise seems to be not working in IE8.

Here's the javascript I've put in the header:

<script language="JavaScript">
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['hidden','hidden2','hidden3','hidden4','hidden5','hidden6','hidden7','hidden8','hidden9'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
 </script>

and the relevant html:

<div id="greyback"><h2>Some header text</h2>
<ul id="scrollbox">
<div class="listcat">A sub-header in the list</div>
<li class="main">
<a href="javascript:showHide('hidden2');">Clickable List Item
</a>
</li>
<span id="hidden2">Detail about the list item - the javascript pops this span up when the List Item is clicked  
<span class="team"><img src="img.jpg"></span>  
as well as some more text in the same container, plus this link:  
<a href="link.pdf"><img src="img.png" >  
</a>
</span>
</ul>
</div><!-- closes greyback -->

The CSS relevant to these javascript-affected elements:

.main {width:15em; background: lightblue;}
#hidden, #hidden2, #hidden3, #hidden4, #hidden5, #hidden6, #hidden7, #hidden8, #hidden9
{position: absolute;width: 46.5em; min-height: 20em; height: auto; left: 2em; top:16.5em;  z-index:10; font-size:0.8em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.15em; display: none; font-family: Arial, sans-serif; float:left;
}
#scrollbox span.team img {float: right;  border: solid 0.1em #7ebb11; padding:2px; width:6em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;}
#hidden2 a, #hidden3 a, #hidden4 a, #hidden5 a, #hidden6 a, #hidden7 a, #hidden8 a, #hidden9 a {float: left; width: auto; height:2em; margin: 0 auto; margin-right: 1em; margin-bottom: 0.5em;  padding-top:0.5em; color: green; font-style: bold; font-size: 100%;}
#hidden2 a img, #hidden3 a img, #hidden4 a img, #hidden5 a img, #hidden6 a img, #hidden7 a img,  #hidden8 a img, #hidden9 a img {width: 2em; margin:0 auto; float: left;  height:2em; margin-top: -0.5em;}
#hidden2 a img: hover, #hidden3 a img:hover, #hidden4 a img: hover, #hidden5 a img: hover, #hidden6 a img: hover, #hidden7 a img: hover, #hidden8 a img: hover, #hidden9 a img: hover {}

And CSS that just does the non-javascript styling of the div, ul, li etc:

#greyback {float: right; width: 21em;  height: auto;   
background-color: #e3e3e3; margin: 0 auto; margin-top: 1em;   
margin-right: 2em; padding-top: 1em; font-family:  Corbel, Calibri,   
sans-serif; border:0.25em solid #535353;}

#greyback h2 {font-size: 0.8em; margin: 0 auto; margin-left: 1em;   
margin-right: 1em;  margin-top: -0.5em; padding-top:1em;    
font-weight: bold; text-align: center; font-family: Corbel, "Century Gothic", Century-Gothic, "Avant Garde", "Avant Garde Gothic", Arial, sans-serif;color:#535353;}

#greyback img {margin-top:1em; border: 0.5em white solid; max-width:85%;   
height: auto;}

#scrollbox  {margin: 0 auto; margin-top: 1em;  margin-bottom: 1em;  width:18em;  list-style: none;  height:auto;  max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500; }

.listcat {float: left; text-align:left; width: 100%; margin-left:-2em; margin-right: 0.5em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 90%; font-weight:bold;} 

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin: 0 auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}

#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a span img:hover {border:0; max-width:7.8em;}
#scrollbox a span img.team {border:solid 2px #7ebb11; padding:2px; max-width:8em; margin: 0 auto; margin-bottom: 0.3em; margin-left: 0.5em; margin-top: 0em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active  {border:none; color: #535353; /*this is the color of the hover pop-up text */ text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}

#scrollbox ul {}
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: -1em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span   {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #ffffff; color: #535353; border: solid #FFA500 0.25em;}

I hope this is simple, but (a) it doesn't seem to be loading at all in IE8 and (b) the list alignment in IE6&7 is chopping off the list text.

Any suggestions very much appreciated! Cheers Patrick

Answer 1

The page crashes with an error "divScroller is not defined", seems like you haven't included some file.

Also, you should wrap any code that modifies the dom in some kind of "ready block", which ensures that the document is ready to be operated on: http://docs.jquery.com/Core/jQuery#callback