Frameset funktioniert nicht in IE8

Habe ich ein frameset gebaut, die soll Mitte einer Webseite in der Mitte des browser-Fensters.

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

Leere ist eine leere html-Dokument. Dies funktioniert perfekt im Firefox und IE6, aber im IE8-es zeigt einfach eine weiße Seite, nämlich die blank.html. Warum ist es zeigt nicht das gleiche wie in Firefox?

EDIT: Das konnte offensichtlich nicht gelöst werden, ohne meinen code, so ist es hier, mit doctype und html-tags und ein paar andere bits ausgeschlossen. Ich habe versucht, Ihre Lösung, aber es immer noch nicht vertikal zentrieren.

<!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>
  • bitte lassen Sie mich Sie Fragen, ob die Verwendung von Framesets ist wirklich notwendig für Ihre website?
  • Auch, wenn Sie angeben konnten, eine Möglichkeit zum zentrieren einer div in der Mitte einer Seite über CSS, es würde nicht notwendig sein. Aber ich habe noch eine Methode finden, für, die.
  • Sie erwähnt, dass Sie die Versorgung der doctype in deinem zweiten code-block, aber es wird keine doctype-entweder im block.
  • Ich sagte, dass ich ausgeschlossen die doctype und html-tags. Kann ich es beheben, wenn es mißverstanden wurde.
  • IE8 ist immer noch beta. Sie sollten warten, bis die Finale version veröffentlicht wird.
InformationsquelleAutor Bevin | 2009-03-15
  1. 2

    Keine Notwendigkeit für ein frameset. Der code unten Mitte ein div in die Seite.

    Die horizontale Zentrierung erfolgt durch Einstellung des linken und rechten Rand auf auto. Die vertikale Zentrierung erfolgt, indem die Spitze der div-50% unten auf der Seite, dann verwenden Sie einen negativen oberen Rand, das ist die Hälfte der Höhe des div, um es zu verschieben bis zur Mitte.

    Müssen Sie auch angeben, die Höhe des html und body Elemente zu 100%, sonst wird Sie nur so hoch sein wie der Inhalt.

    Den div position:relative die auch kümmert sich um Ihr problem mit absolut positionierten Elementen drin. Das div wird ein layer, was bedeutet, dass jedes absolut positionierte element im inneren wird es mit der linken oberen Ecke des div-als Nullpunkt, nicht die Seite.

    Die Grenze auf das div-Element nur zu sehen, wo es ist. Sie können zu entfernen.

    Der code ist getestet in Firefox 3, IE 7, IE 8 beta und Opera 9.

    <!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 ist der code mit dem Inhalt und den Stil eingefügt:

    <!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>
    • Danke, ich war wirklich langsam die Ideen aus 🙂
    • Sorry, es funktioniert nicht. Die inneren Elemente sind immer noch in Ihren ursprünglichen Positionen, und das hintergrund-Bild auf Magische Weise verschwunden (auch wenn ich das hintergrund-Bild in der Content-Klasse).
    • Ich klebte Ihre Inhalte und Stile in der Seite (oben gepostet), und es funktioniert Prima. Der hintergrund Bild ist da, und die div ' s positioniert sind, innerhalb der Content-div.
    • Das hintergrund-Bild muss zentriert zu(vergessen zu sagen, dass... scheint etwas zu sein, was ich die ganze Zeit mache), nicht nur in den Körper.
    • Nur ändern Sie background-image in den hintergrund, und fügen Sie wiederholen (repeat-x/repeat-y/no-repeat) und die horizontale und vertikale Positionierung (ex. Zentrum), nachdem die url().
    • Das Bild ist jetzt zentriert, aber ich bemerkte nun, dass die inneren divs verschoben, zu weit rechts und unten. Es gibt schwarze "Löcher" auf dem hintergrund-Bild, dass die beiden divs muss passen, und Sie werden durch den gleichen Abstand. Habe versucht, Sie position:relative, aber das versaut das video-div...
    • Überprüfen Sie, ob die Koordinaten richtig sind. Sie hatte wohl eine Marge auf den Körper vor, so dass die Koordinaten kann eingestellt werden, dass.

    InformationsquelleAutor Guffa
  2. 3

    Oh my!

    Können Sie erreichen genau das gleiche Ergebnis mit dem folgenden css-Code in Ihre webpage.html Datei:

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

    Bitte nicht, die Einstellung der margin-top 567 pixel wird nur in der Mitte Ihr Inhalt für eine bestimmte Bildschirmauflösung.

    wenn der IE ist empfindlich auf das body-tag, die Sie einbetten können den gesamten Inhalt des Körpers mit einem div:

     <body> 
<div id="content" > 
<-- DER INHALT --> 
</div> 
<body>

    Dann verwenden Sie die folgende css:

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

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

    Und nun gelten alle css-Regeln, die Sie hatten für den Körper, um das div#content.

    EDIT: Also ich sehe den html-code jetzt.

    Sollten Sie versuchen, position:relative statt absolute für deine divs und sehen, was passiert mit dem letzten "Lösung" habe ich eingereicht.

    Entfernen Sie außerdem alle Ihre bisherigen Marge Einstellungen in Ihrem Körper css-Regel und verschieben Sie das Hintergrundbild für die div#content-Regel.

    ... und lassen Sie mich wissen 😛

    • Nope, funktioniert nicht. Könnte es etwas mit der Tatsache zu tun, dass die Seite enthält, angezeigt:absolute Elemente und, dass es ein Hintergrundbild?
    • Nein, es ist wohl die seltsame Handhabung der Körper von IE. Ich werde Bearbeiten Sie meine Antwort mit etwas, das sollte das Problem beheben.
    • Funktioniert immer noch nicht. Ich denke, dass das content-div ist der Auffassung, dass es leer ist, da alle anderen divs gesetzt, um anzuzeigen:absolut. Und ich nur erkennen, dass kein Betrag von css auf den body oder content div funktionieren würde, da alle inneren divs sind absolute wie auch immer 🙁
    • Meh, bedeutete position:absolute.
    • Sollten Sie veröffentlichen Sie Ihre Seite code, damit wir Sortieren diese aus.
    • Ja, ich versuchte nur, dass. Der gesamte Inhalt div wurde nur nach unten verschoben, indem 567px, und die video-div war in der völlig falschen Stelle.

    InformationsquelleAutor Julian Aubourg
Schreibe einen Kommentar