Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
 All Forums
 Community Forums
 Community Discussions (All other subjects)
 Image won't display in IE7

Note: You must be registered in order to post a reply.
To register, click here. Registration is FREE!
Before posting, make sure you have read this topic!

Screensize:
UserName:
Password:
Format Mode:
Format: BoldItalicizedUnderlineStrikethrough Align LeftCenteredAlign Right Horizontal Rule Insert HyperlinkInsert EmailInsert Image Insert CodeInsert QuoteInsert List
   
Message:

* HTML is OFF
* Forum Code is ON
Smilies
Smile [:)] Big Smile [:D] Cool [8D] Blush [:I]
Tongue [:P] Evil [):] Wink [;)] Clown [:o)]
Black Eye [B)] Eight Ball [8] Frown [:(] Shy [8)]
Shocked [:0] Angry [:(!] Dead [xx(] Sleepy [|)]
Kisses [:X] Approve [^] Disapprove [V] Question [?]

 
   

T O P I C    R E V I E W
JJenson Posted - 03 January 2009 : 21:58:29
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<
3   L A T E S T    R E P L I E S    (Newest First)
SiSL Posted - 04 January 2009 : 12:34:33
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...
<
JJenson Posted - 04 January 2009 : 10:43:41
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.<
SiSL Posted - 04 January 2009 : 02:48:42
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...



<

Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.06 seconds. Powered By: Snitz Forums 2000 Version 3.4.07