Frameset ne fonctionnera pas dans IE8

J'ai construit un jeu de cadres qui est destiné à centrer une page Web au milieu de la fenêtre du navigateur.Frameset ne fonctionnera pas dans 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>

Le blanc est un document html vide. Cela fonctionne brillamment dans Firefox et IE6, mais dans IE8, il affiche simplement une page blanche, à savoir le blank.html. Pourquoi ne montre-t-il pas la même chose que dans Firefox?

EDIT: Cela pourrait évidemment ne pas être résolu sans mon code, donc c'est ici, avec les balises doctype et html et quelques autres bits exclus. J'ai essayé votre solution, mais elle ne se centre toujours pas verticalement.

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

Source

2009-03-15 Bevin

s'il vous plaît laissez-moi vous demander si l'utilisation de frameset est vraiment nécessaire pour votre site web? – markus

Eh bien, si vous pouviez fournir un moyen de centrer un div au milieu d'une page à travers CSS, il ne serait pas nécessaire. Mais je n'ai pas encore trouvé de méthode pour cela. – Bevin

Vous avez mentionné que vous fournissez le doctype dans votre second bloc de code mais il n'y a pas de doctype dans les deux blocs. –

Pas besoin d'un jeu de cadres. Le code ci-dessous va centrer un div dans la page.

Le centrage horizontal est effectué en définissant les marges gauche et droite sur auto. Le centrage vertical est effectué en plaçant le haut du div 50% sur la page, puis utilisez une marge supérieure négative qui est la moitié de la hauteur du div pour le déplacer vers le centre.

Vous devez également spécifier la hauteur des éléments html et body à 100%, sinon ils seront seulement aussi élevés que le contenu.

Le div a position:relative qui prend également soin de votre problème avec des éléments absolument positionnés à l'intérieur. Le div devient un calque, ce qui signifie que tout élément placé à l'intérieur de celui-ci utilisera le coin supérieur gauche de la div comme point zéro, pas la page.

La bordure sur la div est seulement pour voir où c'est. Vous pouvez supprimer cela.

Le code a été testé dans Firefox 3, IE 7, IE 8 beta et 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:
Voici le code avec le contenu et le style collé dans:

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

Source

2009-03-15 18:49:32 Guffa

Merci, je manquais vraiment d'idées :) –

Désolé, cela ne fonctionne pas . Les éléments internes sont toujours dans leur position d'origine et l'image d'arrière-plan a disparu comme par magie (même si j'ai mis l'image de fond dans la classe Content). – Bevin

J'ai collé votre contenu et vos styles dans la page (posté ci-dessus), et ça marche très bien. L'image d'arrière-plan est là, et les div sont positionnés à l'intérieur de la div Content. – Guffa

Oh mon dieu!

Vous pouvez obtenir le même résultat à la css suivante dans votre fichier webpage.html:

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

S'il vous plaît pas que le réglage de la marge supérieure à 567 pixels ne centrez votre contenu pour une résolution d'écran spécifique .

si IE est chatouilleux sur l'étiquette du corps, vous pouvez intégrer tout le contenu du corps avec un div:

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

puis utilisez les éléments essentiels suivants:

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

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

Et appliquez maintenant tous les règles CSS que vous aviez pour le corps à div # contenu.

EDIT: Donc, je vois le code html maintenant.

Vous devriez essayer la position: relative au lieu de absolue pour vos divs et voir ce qui se passe avec la dernière "solution" que j'ai soumise.

De même, supprimez tous vos paramètres de marge antérieurs dans la règle css de votre corps et déplacez l'image d'arrière-plan sur la règle de contenu div #.

... et faites le moi savoir: P

Source

2009-03-15 16:21:42

Non, ne fonctionne pas. Cela a-t-il quelque chose à voir avec le fait que la page contient display: des éléments absolus et qu'elle a une image de fond? – Bevin

Non, c'est probablement la manipulation étrange du corps par IE. Je vais modifier ma réponse avec quelque chose qui devrait résoudre le problème. –

Ne fonctionne toujours pas. Je pense que le contenu div croit qu'il est vide, car tous les autres divs à l'intérieur sont affichés: absolu. Et je viens de réaliser qu'aucune quantité de CSS sur le corps ou le contenu div ne fonctionnerait, puisque tous les divs sont absolus de toute façon :( – Bevin

Répondre

Questions connexes