Page not displaying correctly in Firefox, Chrome & Safari

Go to:
http://www.thebusinessfile.info/maps/miltonkeyneslocation.html
and click on Central Milton Keynes.
This will open displaymap.asp in a new window.
This page displays 3 iframes; the adverts, the map image and the map listing.
In IE8 the page displays as I want it to; a horizontal scroll bar appears under the image when it is required.
However, in the other browsers the image displays in a small fixed width frame with a scroll bar irrespective of page size.
The problem seems to be assigning a percentage width (80%) to the iFrame.
If I apply a fixed width then more of the image displays but the larger maps then can get covered by the listing section - and no scroll bar is available.
This can be viewed at http://www.mitre.net/maps/miltonkeyneslocation.html

The code for displaymap.asp is here with the database connection stuff removed:

<html>
<head>
<%Response.Write("<title>" & sMap & " in " & sLocation & "</title>")%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#mapbanner {
      position: absolute;
      top: 0px;
      left: 0px;
}
#mapads {
      position: absolute;
      top: 70px;
      left: 5px;
      background-color: #DFECF9;
}
#mapimage {
      position: absolute;
      top: 70px;
      left: 150px;
      overflow: auto;
      background-color: #DFECF9;
}
#maptext {
      position: relative;
      top: 40px;
      float: right;
      background-color: #DFECF9;
}
-->
</style>
<script type="text/javascript">
function setmapads(userFile)
{
document.getElementById("mapads").innerHTML = "<iframe src='"+userFile+"' width=150 height=500 frameborder=0>";
}
function setmapimage(userFile)
{
document.getElementById("mapimage").innerHTML = "<iframe src='"+userFile+"' width=80% height=525 frameborder=0 scrolling=auto>";
}
function setmaptext(userFile)
{
document.getElementById("maptext").innerHTML = "<iframe src='"+userFile+"' height=525 frameborder=0>";
}
</script>
</head>
<body onLoad="setmapads('../adverts/bin/indestadverts.aspx?id=<%= iMap %>');
setmapimage('centremap.asp?id=<%= iMap %>');
setmaptext('rightlisting.asp?id=<%= iMap %>')">
<div id="mapbanner">
      <table width="560" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="36" colspan="2" valign="top"><img src="../img/maps/frame-maptop.gif " width="424" height="24" /> </td>
    </tr>
    <tr>
      <td width="100%" valign="top"><div align="center">
          <h3><%= sMap %></h3>
      </div></td>
      <td width="0%" height="5"></td>
    </tr>
  </table>
</div>
<div id="mapads">&nbsp;</div>
<div id="mapimage">&nbsp;</div>
<div id="maptext">&nbsp;</div>
</div>
</body>
</html>

And for centremap.asp:

<html><head><title>Mitre Publications</title>
<link rel=stylesheet type=text/css href=../style.css>
<style type='text/css'>
</style>
</head>
<body bgcolor="#DFECF9">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DFECF9">
<tr><td bgcolor="#DFECF9"><div align="center"><img src="mapimages/<%= sGif %>" /></div></td>
</tr>
<tr><td></td>
</table>
</div>
</body>
</html>            
 
Would appreciate some help!
 
chrismkAsked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
If you give the containing div(#mapimage) a width of 80% does that help?
0
 
chrismkAuthor Commented:
It certainly does!
Many thanks

Chris
0
 
LZ1Commented:
Great!  Glad we got it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.