(Resolvido) css... IE X FF

Notax · Abril 25, 2008

Boa tarde pessoal...

porque as divs abaixo posicionadas de uma forma no FF (forma "correta") mas de outra forma quando visualizada no IE?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body> 
<style type="text/css">

/* Propriedades comuns às duas colunas laterais de links  */
div.link-list {
        width:10.2em;
        position:absolute;
        top:30;
        font-size:80%;
        margin-left:0.7em;
        margin-right:0.7em;
        padding-left:0em;
        padding-right:0em;

}
/* usamos a propriedade margin para abrir espaços para as colunas laterais */
#header {
        top:0;
        font-size:80%;

        
}

#main {
        font-size:80%;
        margin-left:10.9em;
        margin-right:10.9em;
        padding-left:1em;
        padding-right:1em;

}
/* e aqui colocamos as colunas laterais no lugar */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

</style>

</body>
<div id="header"; STYLE="border: solid; border-color: red;"> header </div>
<div id="main"; STYLE="border: solid; border-color: green;"><!--#include virtual="/personal.htm"--></div>
<div id="list1" class="link-list" STYLE="border: solid; border-color: gray;"> list 1 </div>
<div id="list2" class="link-list" STYLE="border: solid; border-color: blue;"> list 2 </div>
</html>

Como faço para corrigir isso?

Como faço para posicionar todas as divs mais ao centro da tela, melhorando a visualização quando a mesma for feita em 800X600?

valeu a força.

[]'s Notax

hipnos na area · Abril 25, 2008

englobe todas as DIVs em uma DIV com tamanho definido:

Não use position para alinhar os divs use float:; e clear:;

div#global{
background:#fc0;
margin:0 auto;
width:800px;
}

<div id="global">
DIVS
</div>

e troque o doctype por STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Notax · Abril 26, 2008

valeu Hipnos... apanhei muito... mas consegui aplicar estes conceitos que citaste: flooter e clear... segue abaixo como ficou o script...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body> 

<style type="text/css">
div#global{
        background:#fc0;
        margin:0 auto;
        width:800px;
}
#list1 {
        width:130px;
        left:0px;
        float: left;
}
#list2 {
        float: right;
        width:130px;
        right:0;
}
#main {
        width:500px;
        margin:0 auto;
}
</style>

</body>
<div id="global"; STYLE="border: solid; border-color: black">
<div id="header"; STYLE="border: solid; border-color: red;"> header </div>
<div id="list1"; STYLE="border: solid; border-color: gray;"> list 1</div>
<div id="list2"; STYLE="border: solid; border-color: blue;"> list 2</div>
<div id="main"; STYLE="border: solid; border-color: green;"><!--#include virtual="/personal.htm"--></div>
<div id="footer"; STYLE="border: solid; border-color: purple;"> footer </div>
</div>
</html>

valeu a atenção.

[]'s Notax

Editado Abril 26, 2008 por Notax

hipnos na area · Abril 26, 2008

só mais uma dica não necessitará o uso de left:0px; e right:0px; ;)

somente os floats serão necessarios

Notax · Abril 26, 2008

valeu Hipnos... mais uma vez... mas o pior é que me dei conta de mais um detalhe que está acontecendo...

A div "main" não encosta na "header" quanda a pagina é visualizada pelo FireFox...

No IE está perfeito...

Como posso fazer pra resolver esse último detalhezinho?

o código atual está assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body> 

<style type="text/css">
body {
    background: url("fundo_teste.jpg") repeat-x fixed;
}

div#global{
        background-color: transparent;;
        margin:0 auto;
        width:700px;
}
#main{
        top:0;
}

#access {
        background-color: #FF6600;
}
#header {
        background-color: transparent;
        height:100px;
}

#list1 {
        background:url("fundo_frames.jpg");
        width:147px;
        height:1000px;
        left:0px;
        float: left;
}
#list2 {
        background:url("fundo_frames.jpg");
        float: right;
        width:147px;
        height:1000px;
        right:0;
}
#main {
        background-color: #ffffff;
        font-size: 80%;
        width:400px;
        height:1000px;
        margin:0 auto;
}
</style>

</body>
<div id="global">
<div id="access"> access </div>
<div id="header" STYLE="border: solid; border-width: 1px;border-color: #011C37;"><!--#include virtual="/testes/header.asp"--></div>
<div id="list1"><!--#include virtual="/testes/menu.asp"--></div>
<div id="list2"> list 2</div>
<div id="main"><!--#include virtual="/personal.htm"--></div>
<div id="footer"> footer </div>
</div>
</html>

valeu a força e toda atenção.

[]'s Notax

Editado Abril 26, 2008 por Notax

Notax · Abril 29, 2008

Pessoal... bom dia... continuo com esse probleminha aqui na div "Main" ela não encosta na Header quanda estou usando o FireFox... no IE tá perfeito...

já tentei top:0 já tentei sem top nada resolveu...

Onde será que está o meu erro?

[]'s Notax

hipnos na area · Abril 29, 2008

como eu lhe disse top:; e left:; não são necessarios pois são usados somente com position:;

use margin:; negativa para posicionar ;)

Notax · Abril 30, 2008

valeu denovo hipnos...

Mas assim ó: a div main está desta forma:

#main {
        background-color: #ffffff;
        font-size: 80%;
        width:400px;
        height:1000px;
        margin:0 auto;
}

enquanto eu não tiro esse margin:0 auto; não adianta colocar um margin-top:-10px; que não faz efeito nenhum... e se eu tiro (até poderia, seria somente colocar tb um margin-left:xx; eu acho) e coloco o margin-top:-10px; acaba que acerta no FF e bagunça no IE...

isso é assim mesmo? complicadinho de acertar pros dois navegadores? como será que eu posso fazer pra arrumar isso de forma a ficar bom nos dois navegadroes?

valeu a força.

[]'s Notax

tonzinhu · Abril 30, 2008

é bem chato mesmo deixar tudo ok em ambos browsers.

mas testei aqui nos 2 navegadores e está normal.

se tiver como dar um print ajudaria um pouco.

falora

Notax · Abril 30, 2008

Opa... daí pessoal... agora ficou beleza... consegui aqui usando margin... antes não tinha dado porque o servidor tava com um probleminha e tava demorando pra atualizar os ftps... mas agora rolou perfeito...

valeu a força... um agradecimento especial aí ao Hipnos que deu uma baita atenção...

[]'s Notax

Entrar

(Resolvido) css... IE X FF

Pergunta

Notax

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

hipnos na area

Link para o comentário

Compartilhar em outros sites

Notax

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

Notax

Link para o comentário

Compartilhar em outros sites

Notax

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

Notax

Link para o comentário

Compartilhar em outros sites

tonzinhu

Link para o comentário

Compartilhar em outros sites

Notax

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades