safari - div images leaving a horible trail over iframe

**shanski** · 04-10-2008, 03:56 AM

Hi - sorta newbie here

I have a problem with a page I am putting together:

I have an Iframe, and an image that has been layered over the top of the iframe.

Works fine in IE and Firefox - But Safari seems to break the page - whenever I use the scrollbar, the image leaves a horible trail through the Iframe.

Have a look (and make sure to use safari): http://www.soulfulunderground.net/test/info.htm

Heres my code:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>site</title>
<style type="text/css">
<!--

#content {
    font-family: Verdana, Geneva, Arial, sans-serif;
    margin-left: -350px;
    position: absolute;
    top: -266px;
    left: 50%;
    width: 700px;
    height: 532px;
    visibility: visible
}
-->
</style>
</head>
<body>

  <div id="content">
    <iframe style="position:absolute; top: 300px; left: 6px; z-index: 1; display: block; width: 687px; height: 492px; frameborder="0" src="frame.htm"> </iframe>
    <div style="position: absolute; top: 710px; left: 300px; z-index: 3; display: block; width: 93px; height: 124px; border: 0;"> <img src="image.jpg"> </div>

</div>
</body>
</html>

**chrishirst** · 04-10-2008, 04:16 AM

Slow loading image/page is the usual cause. Does it catch up when you stop scrolling?

**shanski** · 04-10-2008, 04:41 AM

Quote:

Originally Posted by chrishirst

Slow loading image/page is the usual cause. Does it catch up when you stop scrolling?

no - It doesnt catch up, but rather leaves a horible trail through the iframe, as if the image has seeped through to the iframe layer.

I hadn't thought of the problem being that it is a slow loading image. The image size is quite small, but do you think it may help if I use javascript to preload the images?

shan

**chrishirst** · 04-10-2008, 04:52 AM

Nope, It sounds more like a case for getting rid of the Iframe.

It's not necessarily the image that is loading slowly, hence my use of "image/page". There is quite a noticeble delay in loading the iframe content.

So do you really need to use an iframe?

**shanski** · 04-10-2008, 05:15 AM

Quote:

Originally Posted by chrishirst

Nope, It sounds more like a case for getting rid of the Iframe...

bummer - I really didn't want to hear that..

The alternate option is, instead of using an iframe, I have all my text content on a div with a lower z-index vale, and have my images that I want to remain stationary (not scroll) at a higher z-index value with the style POSITION: FIXED;

..but I tried that and quickly found out that POSITION: FIXED is not understood by older versions of IE (including IE 7.0.57 which I am using here), and the javascript work around gave very jerky results.

what a headache!!

So anyone got a fix for the IE position: fixed problem??

**LadynRed** · 04-10-2008, 10:36 AM

Quote:

The alternate option is, instead of using an iframe, I have all my text content on a div with a lower z-index vale, and have my images that I want to remain stationary (not scroll) at a higher z-index value with the style POSITION: FIXED;

That's NOT your only option. In this situation you can easily use position:absolute with a higher z-index JUST for the image that you want to 'stack' on top of your content.