IE6 image disapearing problem

HTML & CSS
1

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.

2

can any one confirm it

3

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.


* html #mainContent{zoom:1.0}
4

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!

5

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. :tup:

6

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 :slight_smile:

7

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) :slight_smile:

#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

8

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).

9

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 :).

10

Hi,

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

e.g.


    <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.

11

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:).

12

hi Paul O’B,
you are the man. I don’t know much about Jquery so I used the code that you mentioned and now it seems to be working fine :). Can any one please confirm it? I uploaded the pages for testing purpose

http://www.clarysolar.com/residential-solar-test.html
http://www.clarysolar.com/commercial-Solar-test.html.

thanks

13

Seems to work ok for me now :slight_smile:

14

Thanks Paul :slight_smile: I owe you for this. Thanks everyone for the support. :tup: