IE7 Woes

[filch]

At http://streetkids.zuka.net/sandbox/map-new.05.html the app you see there works as expected in IE8 and Firefox etc. But, IE7 does not work. While the plugin I used does indeed seem to function under IE7, mine is not and I have not been able to track it down. This functionality was built from the following tutorial: http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ As I said, it works in IE7 in the tutorial but not in my app. Perhaps a CSS thing?

All help is most definitely appreciated.

Dave

[Fortinbra]

A potential solution to your problem that I've seen some websites do is to do a browser check, and if it's a browser you know it won't work it, then disable the page, and put up a prompt telling the user to use a different browser.

Most common form I've seen of this is websites saying your using an out of date version of IE, please update (IE9 came out yesturday (3/21) in Windows Updates for V and 7 users). The other forms of this, are the bank or walmart.com (online job application) where it says your using an unsupported browser, continue at your own risk.

[Fortinbra]

I should mention that I don't view this as a GOOD solution, just a potential one, or a temporary one.

[scrappedcola]

Try cleaning up some of the JS errors and I bet you it will work a bit better. In setup.js in

$('#pethiopia').zoommap({})

At around line 34 you have an extra "," at the end of your object. IE 7 doesn't like there where firefox could care less.

$('#pethiopia').zoommap({
		// Width and Height of the Map
		width: '490px',
		height: '595px',
			
		//Misc Settings
		blankImage: '/assets/images/map/blank.gif',
		zoomDuration: 1000,
		bulletWidthOffset: '10px',
		bulletHeightOffset: '10px',
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup',
		popupCloseSelector: 'a.closeme',
		
		//Return to Parent Map Link
		showReturnLink: false,
		returnId: 'returnlink',
		returnText: 'return to previous map',
		
		//Initial Region to be shown
		map: {
			id: 'ethiopia',
			image: '/assets/images/map/ethiopia.03.jpg',
			data: '/assets/popups/ethiopia.html',
			
			}	
		
	});

should be

$('#pethiopia').zoommap({
		// Width and Height of the Map
		width: '490px',
		height: '595px',
			
		//Misc Settings
		blankImage: '/assets/images/map/blank.gif',
		zoomDuration: 1000,
		bulletWidthOffset: '10px',
		bulletHeightOffset: '10px',
		
		//ids and classes
		zoomClass: 'zoomable',
		popupSelector: 'div.popup',
		popupCloseSelector: 'a.closeme',
		
		//Return to Parent Map Link
		showReturnLink: false,
		returnId: 'returnlink',
		returnText: 'return to previous map',
		
		//Initial Region to be shown
		map: {
			id: 'ethiopia',
			image: '/assets/images/map/ethiopia.03.jpg',
			data: '/assets/popups/ethiopia.html'			
			}	
		
	});

The same is happening in each of the zoommap functions in the same place (did you cut an paste? :-) tisk tisk tisk)

[filch]

This comma is there in the zoommap plugin I used so I left it. I will try to take it out and see what happens but I don't think that will be it. This app basically uses two plugins, the popup stuff found at the URL above and the zoommap plugin, which handles the second popup and the placement of the flags on the map itself. However, I will see if it makes any difference.

Thanks

Dave

[filch]

Well, damned if that did not make a difference. The maps do come up now however, there seems to be perhaps a z-index issue in IE 7 ... maybe? I cannot click on the flag to bring up the profiles and it seems like the fade layer is covering everything.

[scrappedcola]

Yea I noticed the fade issue too. I've run into this in the past but I can't remember what I did to solve it. I will look through some of my old sites and get back to you as soon as I find something. You might also try googling for "IE7 opacity position relative issue" or something similar. I seem to remember looking for that but I don't remember off hand.

[scrappedcola]

You might try moving the popup's to outside of the main content to the same place the fade div is being created at the bottom of the boy. In the places where I have a similar popup style (I just rolled my own but they have similar css properties) they both are at the same level in the dom in mine.

[filch]

Well that did indeed change the fade to being under the maps. Now it is a matter of some maps being in one position and other being somewhere else in IE 7. But ... progress is made ;-)