Conjunto de quadros não funcionarão no IE8

StackOverflow https://stackoverflow.com/questions/648061

Pergunta

eu ter construído um conjunto de quadros que se destina a centralizar uma página no meio da janela do navegador. 

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

Blank é um documento html vazio. Isso funciona brilhantemente no Firefox e IE6, mas no IE8 simplesmente mostra uma página em branco, ou seja, a blank.html. Por que não mostrar o mesmo que no Firefox?

EDIT: Isso não poderia, evidentemente, ser resolvidos sem meu código, então aqui está, com doctype e html tags e alguns outros pedaços excluídos. Eu tentei sua solução, mas ainda não centralizar verticalmente. 

<!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>
Foi útil?

Solução

Não há necessidade de um conjunto de quadros. O código a seguir irá centralizar uma div na página.

A centragem horizontal é feito definindo as margens esquerda e direita para auto. A centralização vertical é feito colocando o topo da div 50% para baixo da página, em seguida, usar uma margem superior negativa que é a metade da altura da div para movê-lo até o centro.

Você também precisa especificar a altura dos elementos html e body a 100%, caso contrário, eles só vão ser tão alta quanto o conteúdo.

O div tem position:relative que também cuida do seu problema com elementos posicionados absolutamente dentro dela. O div torna-se uma camada, o que significa que qualquer elemento absolutamente posicionado no seu interior irá usar o canto superior esquerdo da div como ponto zero, não a página.

A fronteira na div é só para ver onde ele está. Você pode remover isso.

O código é testado em Fogo 3, IE 7, IE 8 beta e 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:
Aqui está o código com o conteúdo e estilo colados em: 

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

Outras dicas

Oh meu!

Você pode conseguir exatamente o mesmo resultado com o seguinte css em seu arquivo webpage.html: 

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

Por favor, não que a configuração da margem superior a 567 pixels só irá centrar o seu conteúdo para uma resolução de tela específico.

Se IE é melindroso sobre a tag do corpo, você pode incorporar todo o conteúdo do corpo com uma div: 

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

Em seguida, use o seguinte CSS: 

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

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

E agora aplicar todas as regras css que você teve para o corpo a div conteúdo #.

EDIT:. Então eu vejo o código html agora

Você deve tentar. Posição: parente em vez de absoluta para o seu divs e ver o que acontece com a última "solução" Eu enviei

Além disso, remova todas as suas configurações de margem anteriores na sua regra css corpo e mover a imagem de fundo para a regra div # content.

... e deixe-me saber: P

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top