IE6 image disapearing problem

**trafford** · Feb 11, 2010 02:11

Hi,
I used JavaScript tab navigation in some of my site pages. The site is working fine in every browser except IE6 and IE7. The problem is when I open the page the images appear on the pages but when i refresh the browser it disappear strangely and after right clicking the image space and click show image it appears again. This is usually happening in the tab section of the pages. The URL is given below.

http://www.clarysolar.com/residential-solar.html

waiting for the help because i am struck on this strange problem.

**trafford** · Feb 11, 2010 03:18

can any one confirm it

**Paul O'B** · Feb 12, 2010 14:40

Hi,

I couldn't see a disappearing image. Which exact image is going missing?

It sounds exactly like a "haslayout" bug (see faq) and the first thing I would try is to apply "haslayout" to any parent containers that don't have it.

Here for example.

Code:

* html #mainContent{zoom:1.0}

**Stomme poes** · Feb 12, 2010 15:02

Trafford: since there's a bunch of JS on that site, one thing you might want to try is in the IE's, set the security settings to HIGH (which disabled js) and make sure it's a CSS problem and not somehow a JS problem!

PS I want the Smiths' house. It's a little big for my tastes but I've wanted a solar home since I was young. HOME POWER BABY. Wooo!

**trafford** · Feb 13, 2010 06:38

Thanks for the replies guys. What i figured out during my test is when the page is loading and i click the tab navigation, IE6 prematurely stops loading the page. Which causes the images to look disappear in fact they are not loaded. I am attaching some image so you can have a better understanding of the problem.

http://www.flickr.com/photos/47166387@N03/4348751668/

http://www.flickr.com/photos/47166387@N03/4348722206/

http://www.flickr.com/photos/47166387@N03/4347976259/

@Stomme poes.

. Count me in buddy. Me too wanted solar house.

**Paul O'B** · Feb 13, 2010 16:58

Hi,

Apologies I didn't get time to look at this today but I'll have a look tomorrow - unless someone else gets in first

**RyanReese** · Feb 13, 2010 17:14

Hi, my internet is really fast and it was hard for me to see the issue, though when I could click it fast enough if I set the background image on the <img> to the same URL then IE6 would show it

.

Though for users to click on the navigation bar BEFORE even the navigation is done would be quite absurd unless they are in a great rush so I'd be wary of even worrying about it.

You have 4 images total, one doesn't have an ID on it so I couldn't select it but setting the background image works for me (what little I could test)

Code:

#howWorksImg{background:url(images/res_menu2.jpg) no-repeat;}
#topimg{background:url(images/res_menu1_bump.jpg) no-repeat;}
#clientRecImg{background:url(images/res_menu4_bump.jpg) no-repeat;}

You will have to go to the very first <img> inside the "<div id="waltSmith">" and place an ID on it and give it the same background image that the <img> is linking to

**Stomme poes** · Feb 13, 2010 17:47

I'm still just wondering if clicking on a tab when you have JS enabled means the loading of everything else just stops. These are JS tabs. Clicking on them calls a chunk of page to the visible screen. When I turn CSS off entirely I can see all the stuff entirely. So I still wonder if it's a JS thing: it only happens in IE? and IE certianly deals with loading elements and events in relation to on-page elements differently than other browsers (or so I am lead to believe from all the stuff about the memory-leak in older IE's).

**RyanReese** · Feb 13, 2010 17:55

This is my theory. The images are being called from the server but IE gets confused when the tab is clicked because it has to stop what it is doing and go do the JS for the tabs and in the middle of that the image loading gets interrupted.

When I click the tab before the rest of the page loads then I get unstyled content below the tabs and that seems to support my theory

.

**Paul O'B** · Feb 14, 2010 05:50

Hi,

Change the way you call the js by using the onclick attribute and not the href.

e.g.

Code:

    <div id="secndNavi"> <a href="#nogo" onclick="switchid('whySolar');return false;"> <img src="http://www.clarysolar.com/images/rb1.jpg" width="239" height="45" alt="why Solar" /></a><a href="#nogo" onclick="switchid('HowWorks');return false;"><img src="http://www.clarysolar.com/images/rb2.jpg" width="238" height="45" alt="How it works" /></a><a href="#nogo" onclick="switchid('waltSmith');return false"><img src="http://www.clarysolar.com/images/rb3.jpg" width="238" height="45" alt="Case study" /></a><a href="#nogo" onclick="switchid('clientStories');return false"><img src="http://www.clarysolar.com/images/rb4.jpg" width="239" height="45" alt="Client Stories" /> </a> </div>

That should allow the page to load if you click before it is ready.

Note that you have the same hide and show JS routine in your page 3 times so remove all but one of them.

As you are already linking to the jquery library you would be better of using one of the many jquery hide and shows which will be unobtrusive and more accessible.

**trafford** · Feb 18, 2010 07:34

Thanks for the replies guys and sorry for the late reply. I was buys and didn't check the forum.

@Paul O'B Thanks man I will try this after reaching home

.