I am working on a site and have some javascript I wrote to hide and display divs depending on what they click.
In Firefox everything works and images display but in IE images won't display but they leave the space like they are there. Its also in the source so I am unsure why it won't show. Can someone point out what I am doing wrong?
<script type="text/javascript">
function displayLink(visiblelink){
document.getElementById('frontshoulderpain').style.visibility = "hidden";
document.getElementById('generalshoulderpain').style.visibility = "hidden";
document.getElementById('kneepain').style.visibility = "hidden";
document.getElementById('lowerbackpain').style.visibility = "hidden";
document.getElementById('lumbarpaininlowerback').style.visibility = "hidden";
document.getElementById('middleneckpain').style.visibility = "hidden";
document.getElementById('neckshoulderpain').style.visibility = "hidden";
document.getElementById('rotatorcuffpain').style.visibility = "hidden";
document.getElementById('shinsplints').style.visibility = "hidden";
document.getElementById('tenniselbow').style.visibility = "hidden";
document.getElementById('uppershoulderpain').style.visibility = "hidden";
document.getElementById('wristpain').style.visibility = "hidden";
document.getElementById('frontshoulderpain').style.position = "absolute";
document.getElementById('generalshoulderpain').style.position = "absolute";
document.getElementById('kneepain').style.position = "absolute";
document.getElementById('lowerbackpain').style.position = "absolute";
document.getElementById('lumbarpaininlowerback').style.position = "absolute";
document.getElementById('middleneckpain').style.position = "absolute";
document.getElementById('neckshoulderpain').style.position = "absolute";
document.getElementById('rotatorcuffpain').style.position = "absolute";
document.getElementById('shinsplints').style.position = "absolute";
document.getElementById('tenniselbow').style.position = "absolute";
document.getElementById('uppershoulderpain').style.position = "absolute";
document.getElementById('wristpain').style.position = "absolute";
document.getElementById(visiblelink).style.visibility = "visible";
document.getElementById(visiblelink).style.position = "relative";
}
</script>
link: <a onclick="displayLink('frontshoulderpain')">Front Shoulder Pain</a>
div: <div id="frontshoulderpain" class="supportBox">
<h1>Front Shoulder Pain</h1>
1. Hold arm in extended position as one would wind up to roll a bowling ball- Figure 1.<br />
<img src="images/support/FrontShoulderPain-FIG1.jpg" /> <br />
<br />
2. Anchor the base of a KT Tape™ “Y” strip on the top front of the shoulder- Figure 2.<br />
<img src="images/support/FrontShoulderPain-FIG2.jpg" width="150" height="242" /><br />
<br />
3. Pull legs of the “Y” strip with medium tension down and slightly across the front of the
upper arm terminating above the elbow. </div>
.supportBox {
padding: 15px;
position:absolute;
visibility: hidden;
border: 1px solid #F15D22;
margin-bottom: 50px;
z-index: 4;
}