✔ Probleme mit GoogleMaps

Status
Nicht offen für weitere Antworten.
0

08154711

Erfahrenes Mitglied
Hi,

Ich habe in eine bestehende Seite googlemaps eingebettet. Da taten sich ein paar Probleme auf. Im IE ist die Karte nicht scrollbar, sie verbleibt auf ihrer Position. Obwohl ich overflow:scroll für den outercontent verwende ist die Map ausserhalb des Rahmens
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://www.tutorials.de/forum/images/favicon.ico" type="image/x-icon" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="google_javascript/wagmp_map_3.js">/*wagmp*/</script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA05ewtsn-xxWCX0bXAzqbexTJ0ev5ydVxlvFCtGtz-0bogyvVexQWOaUz-i9q3_GXxpT4xuzWIOnV3Q">/*wagmp*/</script>
</head>
<body>
<div id="outercontent">
 <div class="header"><img src="images/header.jpg" alt="header" /></div>
  <div class="left"><img src="images/left.jpg" alt="header" /></div>
  <div class="footer"><img src="images/footer.jpg" alt="header" /></div>
  <div class="right"><img src="images/right.jpg" alt="header" /></div>
  <div id="content"  >
    <div class="marquee">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','715','height','70','movie','marquee/infotafel1','quality','high','wmode','opaque' ); //end AC code
  </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="715" height="70" >
        <param name="movie" value="marquee/infotafel1.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
      </object>
      </noscript>
      </div>>
    <!-- ImageReady Slices (navigation.jpg) -->
    <table id="Tabelle_01" width="783" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img id="navigation_01" src="http://www.tutorials.de/forum/images/navigation_01.gif" width="50" height="110" alt="" /></td>
        <td><a href="index.html"> <img id="news" src="http://www.tutorials.de/forum/images/news.gif" width="76" height="110" border="0" alt="index" /></a></td>
        <td><a href="terminal.html"> <img id="terminal" src="http://www.tutorials.de/forum/images/terminal.gif" width="75" height="110" border="0" alt="terminal" /></a></td>
        <td><a href="tickets.html"> <img id="tickets" src="http://www.tutorials.de/forum/images/tickets.gif" width="76" height="110" border="0" alt="tickets" /></a></td>
        <td><a href="luftpost.html"> <img id="luftpost" src="http://www.tutorials.de/forum/images/luftpost.gif" width="76" height="110" border="0" alt="luftpost" /></a></td>
        <td><a href="anfahrt.html"> <img id="anfahrt" src="http://www.tutorials.de/forum/images/anfahrt.gif" width="75" height="110" border="0" alt="anfahrt" /></a></td>
        <td><a href="clubinfo.html"> <img id="clubinfo" src="http://www.tutorials.de/forum/images/clubinfo.gif" width="76" height="110" border="0" alt="clubinfo" /></a></td>
        <td><a href="vermietung.html"> <img id="vermietung" src="http://www.tutorials.de/forum/images/vermietung.gif" width="76" height="110" border="0" alt="vermietung" /></a></td>
        <td><a href="kontakt.html"> <img id="kontakt" src="http://www.tutorials.de/forum/images/kontakt.gif" width="75" height="110" border="0" alt="kontakt" /></a></td>
        <td><a href="http://453186.guestbook.onetwomax.de/"> <img id="gaestebuch" src="http://www.tutorials.de/forum/images/gaestebuch.gif" width="76" height="110" border="0" alt="gaestebuch" /></a></td>
        <td><img id="navigation_11" src="http://www.tutorials.de/forum/images/navigation_11.gif" width="52" height="110" alt="" /></td>
      </tr>
    </table>
    <!-- End ImageReady Slices -->
    <div align="right"><div class="map" id="wagmp_map_3" style="width: 450px; height: 350px;"></div></div>
  <p class="panfahrt Stil4">Tante JU<br />
        <span class="Stil5">Music and More</span><br />
        <span class="Stil3">An der Schleife 1<br />
          01099 Dresden</span><br />
      <br />
      <span class="Stil3">Die Zufahrt ist ab Haltestelle <br />
        Dresden Industriegel&auml;nde <br />
        ausgeschildert.</span></p>
    <p class="email"><a href="Email">info@tanteju.com</a></p>
    <br />
    <br />
    <br />
    <br /><br />

    <p class="impimg"><a href="impressum.html" target="_blank"><img src="http://www.tutorials.de/forum/images/impressum.jpg"  alt="Impressum" border="0"/></a></p>
    <br />
  </div>
</div>

<script type="text/javascript" src="google_javascript/wagmp_maps.js">/*wagmp*/</script></body>
</html>
Code: 
#content {
	overflow-x: hidden;
}
.Stil4 {
	color: #990000
}
.Stil5 {
	color: #013998;
	font-weight: bold;
}
.Stil7 {
	color: #013998
}
.map { margin:10px;}
#content {
	width: 783px;
	height:550px;
	background-color: #FFFFFF;
	overflow: scroll;
	padding-top: 15px;
	padding-left: 15px;
}

#outercontent {
	width:813px;
	height:565px;
	border:#FFFFFF 1px solid;
	margin: 50px auto;
	overflow: scroll;
}
Vielleicht hat jemand einen Tipp
 
Moin,

es wäre günstig, wenn du einen Link dorthin posten könntest, denn mit dem Quellcode lässt sich angesichts der ganzen externen Ressourcen nichts nachvollziehen.
 
Hi,

entferne mal die relative Positionierung in
Code: 
.mapcontent {
	/*position: relative;*/
}
Ciao
Quaese
 
Hi,
Wenn ich die position:relative; entferne ist bei mir keine Änderung im IE - habe dem footer einen z-index von 100 gegeben, jetzt ist die Leiste im IE zwar über der Map aber sie ist trotzdem unter den Rahmen sichtbar. :confused:
 
Zuletzt bearbeitet:
Hi,

dann versuch mal für IEs das Element mit der ID content relativ zu positionieren und entsprechend neu zu formatieren.

Mit einem conditional comment für IEs könnte das wie folgt aussehen:
Code: 
<!--[if IE]>
<style type="text/css">
#content { height:535px;
           left: 15px;
           position: relative;
}
</style>
<![endif]-->
VIelleicht hilft dir das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück