Posted by: Rogério Alencar Lino Filho on: 29 Outubro, 2007
Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.
Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.
html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}
#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}
#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}
#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}
Ok… resolvi por aqui… Obrigado pela base… Até semana passada estava vendo o outro post… “style.css” é o de não-IE e “styleIE.css” é para IE 6 ou 7…
<head>
<style type=”text/css”>
@import url(”http://www.comp.ufscar.br/~ayharano/style.css”);
</style>
<!–[if (IE 6)|(IE 7)]>
<link rel=”stylesheet” type=”text/css” href=”http://www.comp.ufscar.br/~ayharano/styleIE.css”>
<![endif]–>
</head>
<body>
<div id=”table”>
<div id=”cell”>
<div id=”all”>
</div>
</div>
</div>
</body>
Obrigado e até mais… lt e gt são uteis…
alert(’oi’);
30 Outubro, 2007 às 3:01 am
OK… Mas você poderia colocar um exemplo de <div id=”valor”>… É table, cell, conteudo, nessa ordem?