images overlapping

**jahaik** · 12-17-2007, 03:43 AM

ok i have a website that uses frames and a javascript viewer for the gallery. The images (both html and javascript) load fine, but when I click on a new image, or even return to the main page the image stays on the screen and the new page or image just loads on top of this.

everything seems works fine on safari and firefox, the problem is with IE6

here's the site:

www.haikstudio.com

try going to the photo sections of the gallery

help!

**jscheuer1** · 12-17-2007, 06:23 AM

I'll have to haul out my old machine later to test in IE 6 but, this is just plain wrong in any browser:

random.js -

Code:

// JavaScript Document

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "../images/index/01.jpg";
images[2] = new Image();
images[2].src = "../images/index/02.jpg";
images[3] = new Image();
images[3].src = "../images/index/03.jpg";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
//  End -->
</script>

External javascript files should never have that junk in them.

**jscheuer1** · 12-17-2007, 07:23 AM

Well, it does look a mess in IE 6. It's fine in IE 7 though. Funny thing, the page photos.html is fine in IE 6, as is filth.html. So, its gotta be something to do with your frameset. That's hard to test locally. But, I'm betting that it is your invalid use of the body tag on your frameset page. But the validator didn't like a number of things about the page. When using a frameset, you would probably be better off with a straight HTML 4.01 frameset:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta name="Keywords" content="Jeremy Haik, Haik, Washington D.C., Photography, Photographic, Film, Encaustic, Art, Wax, Inkjet, Digital">
<meta name="Description" content="Jeremy Haik Photography, Washington D.C.">
<title>Jeremy Haik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1563510-1";
urchinTracker();
</script>
</head>
<frameset rows="*" cols="215,*">
<frame src="/pages/mainframeleft.html" name="leftFrame" frameborder="0" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame">
<frame src="/pages/welcome.html" name="mainFrame" frameborder="0" id="mainFrame" title="mainFrame">
</frameset>
</html>

That is valid and actually improves things slightly in IE 6 here, but I cannot be certain at this time what is causing the rest of the problems. It's very hard to test framesets locally.

IE 6 is not respecting scrolling="no" for the frames. Try making the overflow on the pages in the frames hidden for IE 6 (put this in the head of the pages):

Code:

<!--[if lte IE6]>
<style type="text/css">
html, body {
overflow:hidden;
}
</style>
<![endif]-->

This last bit is just a thought.

**jscheuer1** · 12-17-2007, 07:52 AM

OK, the main problem appears to be in your:

Code:

http://www.haikstudio.com/sheets/gallery.css

file IE 6 just can't for some odd reason handle:

Code:

body {
	
	background: url(../images/gallerybkgrnd.jpg) no-repeat center;
}

once the page is in the frameset. IE conditionals might be better for this, but I just did:

Code:

body {
	
	background: url('http://www.haikstudio.com/images/gallerybkgrnd.jpg') no-repeat center;
}
* html body {
background-repeat:repeat;
}

That took care of it.

Thread: images overlapping

Thread Tools

Search Thread

images overlapping

Bookmarks

Bookmarks

Posting Permissions