✔ Problem mit iFrame im Internetexplorer

Status
Nicht offen für weitere Antworten.
D

DejanB

Grünschnabel
Hi Leute,

ich hab da ein kleines Problem beim schreiben einer Seite. Im FF funktioniert der iframe wunderbar, allerdings machte mir gestern der IE7 ein paar Probleme, heute morgen ist dann auch noch IE6 (glaub ich) hinzugekommen.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <style type="text/css">
body, textarea {
background-color:#8C8CC6;
color:#FFFFFF;
font-family:"Andale Mono",Arial,sans-serif;
scrollbar-base-color:#8C8CC6;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}
  </style>
  <style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: white url(images/ddbg.gif) no-repeat 6000px 6000px;
padding: 0;
margin: 0;
}
#content {
width: 801px;
background-color: rgb(153, 153, 153);
padding: 0;
border: 0;
margin: 0;
voice-family: "\"}\"";
voice-family:inherit;
width: 800px;
}
html>body #content {
width: 800px;
}
a {
text-decoration: none;
}
a:link {
color: white;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
h1 {
text-align: center;
padding: 0 0 0 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: green;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: white;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 0;
color: maroon;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 200px;
text-align: center;
cursor: default;
background-color: white;
border: 0;
border-width: 1px 0;
}
li#first {
border-left-width: 0;
}
li#last {
float: right;
border-right-width: 0;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(images/ddbg.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
p {
clear: left;
background: url() center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}
p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #7d6340;
padding: 1.25em 1.25em 0.25em 0.25em;
}
p.image img {
display: block;
border: 1px solid #7d6340;
}
  </style>
  <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
  </script>
  <style>
P {cursor:default}
  </style>
</head>


<body style="color: rgb(255, 255, 255); background-color: rgb(153, 153, 153);" alink="#000099" link="#000099" vlink="#990099">

<div id="content">
<ul id="nav">

  <li id="first">
    <div><a href="start.htm" target="iframe"><img src="images/start.jpg" border="0"></a></div>

  </li>

  <li>
    <div><a href="termine.htm" target="iframe"><img src="images/termine.jpg" border="0"></a></div>

    <ul>

      <li><a href="1form.php" target="iframe">Veranstalterformular</a></li>

      <li><a href="termine.htm" target="iframe">Termine
f&uuml;r 2008</a></li>

      <li><a href="termine.htm" target="iframe">Fahrradcodierungen</a></li>

      <li><a href="veranstalter.htm" target="iframe">Hinweise
f&uuml;r Veranstalter</a></li>

    </ul>

  </li>

  <li>
    <div><a href="wir.htm" target="iframe"><img src="images/wir.jpg" border="0"></a></div>

    <ul>

      <li><a href="entstehung.htm" target="iframe">Die
Entstehung</a></li>

      <li><a href="leitung.htm" target="iframe">Die
Leitung</a></li>

      <li><a href="gruppe.htm" target="iframe">Unsere
Gruppe</a></li>

      <li><a href="ausbildung.htm" target="iframe">Die
Ausbildung</a></li>

      <li><a href="uniform.htm" target="iframe">
Unsere Ausr&uuml;stung</a></li>

      <li><a href="galerie.htm" target="iframe">Galerie</a></li>

      <li><a href="http://vkkleve.foren-max.de" target="iframe">VK-Forum</a></li>

      <li><a href="gb.htm" target="iframe">G&auml;stebuch</a></li>

      <li><a href="links.htm" target="iframe">Links</a></li>

    </ul>

  </li>

  <li id="last">
    <div><a href="kontakt.htm" target="iframe"><img src="images/kontakt.jpg" border="0"></a></div>

  </li>

</ul>

<img style="width: 800px; height: 15px;" alt="" src="images/titel.gif" leftmargin="0">
<iframe src="start.htm" name="iframe" leftmargin="10" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>

</body>
</html>

Im besonderen geht es um die Stelle:
Code: 
<iframe src="start.htm" name="iframe" leftmargin="10" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe>

Im FF wird dann wunderbar die Größe an den restlichen Fensterinhalt angepasst, beim IExplore hab ich dann ein knapp 70 Pixel breiten Streifen, in dem dann auch noch ein unterer Scrollbalken auftaucht (btw: Kann man irgendwie verhindern, dass der untere Balken auftaucht Oder durch nen Code halt nur den rechten zulassen?)

Ich hoffe ihr könnt helfen, launch der Seite sollte nächste Woche sein, nur irgendwie ist das dumm, wenn man die seite nur mit genau einem Browser sehen kann...wenig Öffentlichkeitswirksam :(
 
Hi,

mit dieser Regelerweiterung für das Elternelement #content dürfte der IE den iFrame auf die gewünschte 100%-Höhe im Viewport strecken:

Code: 
#content {
width: 801px;
background-color: rgb(153, 153, 153);
padding: 0;
border: 0;
margin: 0;
voice-family: "\"}\"";
voice-family:inherit;
width: 800px;
height:100%;
}
Für die Seite, die im iFrame geladen wird, deklarierst du in ihrem Stylesheet:
Code: 
html {
overflow-x:hidden;
}
um den horizontalen Scrollbalken abzustellen.
 
Muss ich das auf der Seite, die geladen wird eintragen, oder auf der Seite die den iFrame beinhaltet?


Das mit dem Zusatz im Content klappt :) Danke schonmal dafür...
 
Das Stylesheet bzgl. des Scrollbalkens wendest du auf das HTML-Dokument start.htm an ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück