SAFARI / IFRAME / DIV IMAGE problem

shan · Apr 10th, 2008, 07:51

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: Select all

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

Emzi · Apr 10th, 2008, 09:41

Why don't you get rid of the iframes altogether?

You can place a style on the DIV that will create a scrollbar for you without having to use two pages to create the one. (Plus it's better for SEO purposes).

The styles you placed on the iframe, place them on the DIV that's holding the iframe.

In the DIV place all the content you want displayed.

Then add "overflow:auto" to the DIV styles and it will create a scrollbar.