The Forum has been Updated
The code has been upgraded to the latest .NET core version. Please check instructions in the Community Announcements about migrating your account.
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?
Javascript Code
HTML Code
CSS
Thanks<
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?
Javascript Code
Code:
<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>
HTML Code
Code:
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>
CSS
Code:
.supportBox {
padding: 15px;
position:absolute;
visibility: hidden;
border: 1px solid #F15D22;
margin-bottom: 50px;
z-index: 4;
}
Thanks<
Posted
instead of visibility: hidden, use display: none and instead of visibility: visible, use display: block
It's fairly easy to confuse display and visibility, because it would seem that they do much the same thing. However, the two properties are in fact quite different. The visibility property determines whether a given element is visible or not. However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.
That's another place where Firefox failed on applying standards as it please...
<
It's fairly easy to confuse display and visibility, because it would seem that they do much the same thing. However, the two properties are in fact quite different. The visibility property determines whether a given element is visible or not. However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.
That's another place where Firefox failed on applying standards as it please...
<
Posted
I actually did that at one point and couldn't get it to work at all. But I will go back adn try again.
to see the example of what I am talking about is here: www.kttape.com/test/support.html
I can't see where I screwed this up cause even with the visibility why would IE not show an image and Firefox show the image. IE even shows the spacing and in the source the image is there it just doesn't show it.<
to see the example of what I am talking about is here: www.kttape.com/test/support.html
I can't see where I screwed this up cause even with the visibility why would IE not show an image and Firefox show the image. IE even shows the spacing and in the source the image is there it just doesn't show it.<
Posted
Well, just try display, and get rid of position absolute actually :)
I guess once a container like DIV set invisible, entire contents are set invisible as well, thus images are not loaded. Makes same in a few pictures at Opera as well... <
I guess once a container like DIV set invisible, entire contents are set invisible as well, thus images are not loaded. Makes same in a few pictures at Opera as well... <