Hi guys.
I have a page for a choir. There is an image of each member's head which when clicked on a div slides in containing an image and blurb of each individual.
The problem.... the div isn't hidden in IE7 or below.
Here's a
link.
The page uses mootools v.1.1. and here's the script:
window.addEvent('domready', function(){
var stretchers = $$('.display');
var toggles = $$('.button');
var mySliders = {};
var myHiders = {};
var visible = null;
var marginreset;
stretchers.each(function(el, i){
mySliders[i] = new Fx.Slide(stretchers[i]);
myHiders[i] = new Fx.Slide(stretchers[i].getParent(),
{
onComplete: function(){
marginreset = this.wrapper.firstChild.getStyle('margin');
this.wrapper.firstChild.firstChild.setStyle('margin', marginreset);
this.wrapper.firstChild.setStyle('margin', '0');
this.wrapper.firstChild.setStyle('height', '0');
this.wrapper.setStyle('height', 'auto');
mySliders[myHiders['next']].toggle();
visible = myHiders['next'];
}
})
mySliders[i].hide();
});
toggles.each(function(el, i){
toggles[i].addEvent('click', function(){
if ((visible != null) && (i != visible)) {
myHiders['next'] = i;
myHiders[visible].toggle();
}
else {
mySliders[i].toggle();
visible = i;
}
});
});
});
and relevant CSS
.button {
color: #222;
margin: 0 0.25em;
padding: 2px 2px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-left: 1px solid #000;
font-size: 11px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
display:block;
text-align:center;
background-color:#000000
}
a {
outline: none !important; /* @ Firefox, remove ugly dotted border */
}
a.button {
text-decoration : none;
}
a.button:hover {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
.display {
padding-top : 1em;
color:#FFFFFF;
}
.display p {
margin: 0;
padding: 4px;
color:#FFFFFF;
}
#membtext {position:relative;width:700px; height:405px; background-image:url(../images/BG/memberbg.png); }
It all works fine in FF, Safari, Chrome, IE8, it's just IE7 and below that's the problem.
