Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Community Forums
 Community Discussions (All other subjects)
 Image won't display in IE7
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

JJenson
Advanced Member

USA
2121 Posts

Posted - 03 January 2009 :  21:58:29  Show Profile  Visit JJenson's Homepage  Reply with Quote
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

<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

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

.supportBox {
padding: 15px;
position:absolute;
visibility: hidden;
border: 1px solid #F15D22;
margin-bottom: 50px;
z-index: 4;
}


Thanks<

SiSL
Average Member

Turkey
671 Posts

Posted - 04 January 2009 :  02:48:42  Show Profile  Visit SiSL's Homepage  Reply with Quote
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...



<

CHIP Online Forum

My Mods
Select All Code | Fix a vulnerability for your private messages | Avatar Categories W/ Avatar Gallery Mod | Complaint Manager
Admin Level Revisited | Merge Forums | No More Nested Quotes Mod

Edited by - SiSL on 04 January 2009 04:16:27
Go to Top of Page

JJenson
Advanced Member

USA
2121 Posts

Posted - 04 January 2009 :  10:43:41  Show Profile  Visit JJenson's Homepage  Reply with Quote
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.<
Go to Top of Page

SiSL
Average Member

Turkey
671 Posts

Posted - 04 January 2009 :  12:34:33  Show Profile  Visit SiSL's Homepage  Reply with Quote
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...
<

CHIP Online Forum

My Mods
Select All Code | Fix a vulnerability for your private messages | Avatar Categories W/ Avatar Gallery Mod | Complaint Manager
Admin Level Revisited | Merge Forums | No More Nested Quotes Mod

Edited by - SiSL on 04 January 2009 12:36:26
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.12 seconds. Powered By: Snitz Forums 2000 Version 3.4.07