Frameset funktioniert nicht in IE8

Ich habe ein Frameset konstruiert, das eine Webseite in der Mitte des Browserfensters zentrieren soll.Frameset funktioniert nicht in IE8

<html> 

    <frameset rows="100%,567px,100%" border="0"> 
     <frame src="blank.html" noresize="noresize" scrolling="yes"> 

     <frameset cols="100%,1128px,100%" border="0"> 
      <frame src="blank.html" noresize="noresize"> 
      <frame src="webpage.html" noresize="noresize"> 
      <frame src="blank.html" noresize="noresize"> 
     </frameset> 

     <frame src="blank.html" noresize="noresize" scrolling="yes"> 

     <noframes> 
      <body>Page requires a frame-supporting browser.</body> 
     </noframes> 

    </frameset> 

</html>

Leer ist ein leeres HTML-Dokument. Dies funktioniert sowohl in Firefox als auch in IE6 hervorragend, aber in IE8 zeigt es einfach eine weiße Seite, nämlich die leere.html. Warum zeigt es nicht das selbe wie in Firefox?

EDIT: Dies könnte offensichtlich nicht ohne meinen Code gelöst werden, also hier ist es, mit Doctype und HTML-Tags und ein paar anderen Bits ausgeschlossen. Ich habe deine Lösung versucht, aber sie zentriert immer noch nicht vertikal.

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="imagetoolbar" content="no"> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    background-image: url(xxxbackground.gif); 
} 
#divInteraction { 
    position:absolute; 
    width:640px; 
    height:480px; 
    z-index:1; 
    left: 460px; 
    top: 47px; 
    overflow: hidden; 
} 
#divVideo { 
    position:absolute; 
    width:424px; 
    height:284px; 
    z-index:2; 
    left: 13px; 
    top: 101px; 
    overflow: visible; 
} 
#imgInteraction { 
} 
#iframeInteraction { 
display: none; 
} 
--> 
</style> 
</head> 

<body> 

<div id="divInteraction"> 
    <iframe id="iframeInteraction" width="100%" height="100%" ></iframe> 
    <img id="imgInteraction" src="powerpoint_pic_0.jpg" /> 
</div> 

    <div id="divVideo"> 

    <object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="" type="application/x-ms-wmp" VIEWASTEXT> 

     <param name="AutoSize" value="false" /> 
     <param name="ShowStatusBar" value="0" /> 
     <param name="DefaultFrame" value="x" /> 
     <param name="ShowControls" value="1" /> 
     <param name="ShowAudioControls" value="1" /> 
     <param name="ShowPositionControls" value="0" /> 
     <param name="ShowTracker" value="1" /> 
     <param name="ShowDisplay" value="0" /> 
     <param name="ShowCaptioning" value="0" /> 
     <param name="ShowGoToBar" value="0" /> 
     <param name="ControlType" value="2" /> 
     <param name="Autostart" value="1" /> 
     <param name="InvokeUrls" value="1" /> 
     <param name="AnimationAtStart" value="0" /> 
     <param name="TransparentAtStart" value="0" /> 
     <param name="SendStateChangeEv" value="1" /> 
     <param name="SendOpenChangeEv" value="1" /> 
     <param name="SendPlayChangeEv" value="1" /> 
     <param name="AllowChangeCtrlType" value="1" /> 
     <param name="AllowChangeDisplaySize" value="1" /> 
     <param name="AllowScan" value="1" /> 
     <param name="AutoRewind" value="1" /> 
     <param name="PlayCount" value="1" /> 
     <param name="Volume" value="0" /> 
     <param name="Filename" value="http://www.example.com/example/example.wmv"/> 


    <embed type="application/x-mplayer2" 
    pluginspage="http://www.microsoft.com/windows/windowsmedia/download/" 
    name="Player1NS" 
    AutoSize="false" 
    ShowStatusBar="0" 
    DefaultFrame="x" 
    ShowControls="1" 
    ShowTracker="1" 
    ShowDisplay="0" 
    ShowCaptioning="0" 
    ShowGoToBar="0" 
    Autostart="1" 
    AnimationAtStart="0" 
    TransparentAtStart="0" 
    PlayCount="1" 
    Volume="0" 
    Filename="http://www.example.com/example/example.wmv" 
    ShowAudioControls="1" 
    ShowPositionControls="0"  
    width="424" 
    height="284"> 
    <br /> 

    </embed>  
</object> 


</div> 

</body> 
</html>

Quelle

2009-03-15 Bevin

bitte lassen Sie mich fragen, ob die Verwendung von Frame-Set wirklich notwendig für Ihre Website? – markus

Nun, wenn Sie einen Weg geben könnten, ein div in der Mitte einer Seite durch CSS zu zentrieren, wäre das nicht notwendig. Aber ich muss noch eine Methode dafür finden. – Bevin

Sie haben erwähnt, dass Sie den Doctype in Ihrem zweiten Codeblock bereitstellen, aber es gibt keinen Doctype in beiden Blöcken. –

Keine Notwendigkeit für ein Frameset. Der folgende Code zentriert ein Div auf der Seite.

Die horizontale Zentrierung erfolgt durch Einstellen der linken und rechten Ränder auf auto. Die vertikale Zentrierung erfolgt, indem Sie den oberen Teil des div um 50% auf die Seite legen und dann einen negativen oberen Rand verwenden, der die Hälfte der Höhe des div beträgt, um ihn in die Mitte zu bewegen.

Sie müssen auch die Höhe der Elemente html und body zu 100% angeben, sonst sind sie nur so hoch wie der Inhalt.

Das div hat position:relative, die auch kümmert sich um Ihr Problem mit absolut positionierten Elementen darin. Das div wird zu einer Ebene, was bedeutet, dass jedes absolut positionierte Element darin die obere linke Ecke des div als Nullpunkt verwendet, nicht die Seite.

Die Grenze auf dem Div ist nur zu sehen, wo es ist. Sie können das entfernen.

Der Code wurde in Firefox 3, IE 7, IE 8 Beta und Opera 9 getestet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://data.w3.org/1999/xhtml"> 
<head> 
<title>Center</title> 
<style type="text/css"> 
html { height: 100%; } 
body { margin: 0; padding: 0; height: 100%; } 
.Content { 
    width: 1128px; height: 567px; 
    margin: -283px auto 0; position: relative; top: 50%; 
    border: 1px solid #000; 
} 
</style> 
</head> 
<body> 

<div class="Content"> 
</div> 

</body> 
</html>

Edit:
Hier wird der Code mit dem Inhalt und Stil eingefügt in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://data.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://data.w3.org/1999/xhtml"> 
<head> 
<title>Center</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 

html { height: 100%; } 
body { margin: 0; padding: 0; height: 100%; background-image: url(xxxbackground.gif); } 
.Content { width: 1128px; height: 567px; margin: -283px auto 0; position: relative; top: 50%; } 

#divInteraction { 
     position:absolute; 
     width:640px; 
     height:480px; 
     z-index:1; 
     left: 460px; 
     top: 47px; 
     overflow: hidden; 
} 
#divVideo { 
     position:absolute; 
     width:424px; 
     height:284px; 
     z-index:2; 
     left: 13px; 
     top: 101px; 
     overflow: visible; 
} 
#imgInteraction { 
} 
#iframeInteraction { 
display: none; 
} 

</style> 
</head> 
<body> 

<div class="Content"> 

<div id="divInteraction"> 
     <iframe id="iframeInteraction" width="100%" height="100%" ></iframe> 
     <img id="imgInteraction" src="powerpoint_pic_0.jpg" /> 
</div> 

    <div id="divVideo"> 

     <object id="wmvVideo" width="424" height="284" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="" 

type="application/x-ms-wmp" VIEWASTEXT> 

       <param name="AutoSize" value="false" /> 
       <param name="ShowStatusBar" value="0" /> 
       <param name="DefaultFrame" value="x" /> 
       <param name="ShowControls" value="1" /> 
       <param name="ShowAudioControls" value="1" /> 
       <param name="ShowPositionControls" value="0" /> 
       <param name="ShowTracker" value="1" /> 
       <param name="ShowDisplay" value="0" /> 
       <param name="ShowCaptioning" value="0" /> 
       <param name="ShowGoToBar" value="0" /> 
       <param name="ControlType" value="2" /> 
       <param name="Autostart" value="1" /> 
       <param name="InvokeUrls" value="1" /> 
       <param name="AnimationAtStart" value="0" /> 
       <param name="TransparentAtStart" value="0" /> 
       <param name="SendStateChangeEv" value="1" /> 
       <param name="SendOpenChangeEv" value="1" /> 
       <param name="SendPlayChangeEv" value="1" /> 
       <param name="AllowChangeCtrlType" value="1" /> 
       <param name="AllowChangeDisplaySize" value="1" /> 
       <param name="AllowScan" value="1" /> 
       <param name="AutoRewind" value="1" /> 
       <param name="PlayCount" value="1" /> 
       <param name="Volume" value="0" />  
       <param name="Filename" value="http://www.xxx.com/xxx/xxx.wmv"/> 


     <embed type="application/x-mplayer2" 
     pluginspage="http://www.microsoft.com/windows/windowsmedia/download/" 
     name="Player1NS" 
     AutoSize="false" 
     ShowStatusBar="0" 
     DefaultFrame="x" 
     ShowControls="1" 
     ShowTracker="1" 
     ShowDisplay="0" 
     ShowCaptioning="0" 
     ShowGoToBar="0" 
     Autostart="1" 
     AnimationAtStart="0" 
     TransparentAtStart="0" 
     PlayCount="1" 
     Volume="0" 
     Filename="http://www.xxx.com/xxx/xxx.wmv" 
     ShowAudioControls="1" 
     ShowPositionControls="0"   
     width="424" 
     height="284"> 
     <br /> 

    </embed>  
</object> 

</div> 

</div> 

</body> 
</html>

Quelle

2009-03-15 18:49:32 Guffa

Danke, ich wirklich die Ideen lief :) –

Leider funktioniert es nicht . Die inneren Elemente sind immer noch in ihren ursprünglichen Positionen und das Hintergrundbild ist magisch verschwunden (auch wenn ich das Hintergrundbild in die Content-Klasse lege). – Bevin

Ich habe Ihre Inhalte und Stile in die Seite eingefügt (oben gepostet), und es funktioniert gut. Das Hintergrundbild ist dort und die Divs befinden sich im Content div. – Guffa

Oh mein!

Sie können genau das gleiche Ergebnis mit dem folgenden CSS in Ihrem webpage.html Datei erreichen:

body { 
    width: 1128px; 
    margin: auto; 
    margin-top: 567px; 
}

Bitte nicht, dass die margin-top auf 567 Pixel Einstellung wird nur Ihre Inhalte für eine bestimmte Bildschirmauflösung Zentrieren .

wenn IE auf dem Body-Tag reizbar ist, können Sie den gesamten Inhalt des Körpers mit einem div einbetten:

 
    <body> 
     <div id="content" > 
     <-- YOUR CONTENT --> 
     </div> 
    <body>

dann die folgenden CSS:

html, body { 
    width: 100%; 
    text-align: center; 
} 

div#content { 
    width: 1128px; 
    margin: auto; 
    margin-top: 567px; 
    text-align: left; 
}

Und nun gelten alle die css-Regeln, die du für den Körper hast, div # content.

EDIT: So sehe ich jetzt den HTML-Code.

Sie sollten versuchen, Position: relativ statt absolut für Ihre Divs und sehen, was mit der letzten "Lösung" passiert, die ich eingereicht habe.

Entfernen Sie auch alle vorherigen Randeinstellungen in Ihrer Körper-CSS-Regel und verschieben Sie das Hintergrundbild in die div # Inhaltsregel.

... und lassen Sie mich wissen: P

Quelle

2009-03-15 16:21:42

Nein, funktioniert nicht. Könnte es etwas damit zu tun haben, dass die Seite display: absolute Elemente enthält und ein Hintergrundbild hat? – Bevin

Nein, es ist wahrscheinlich die seltsame Behandlung von Körper durch IE. Ich bearbeite meine Antwort mit etwas, das das Problem lösen sollte. –

Funktioniert immer noch nicht. Ich denke, dass das Inhalts-Div glaubt, dass es leer ist, weil alle anderen divs darin angezeigt werden: absolut. Und ich erkenne nur, dass keine Menge von CSS auf den Körper oder den Inhalt div funktionieren würde, da alle innerhalb divs sowieso absolut sind :( – Bevin

Frameset funktioniert nicht in IE8

Antwort

Verwandte Themen