[Resolvido] CSS reset..

[- KbeçãO - 0]

Boma dia iMasters...

estou na fase final de criação de um site..

mas, como mtos, meu site fica de um jeito no FF, e de outro no IE...

me aconcelharam a ir no topico:

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__p__1613498#entry1613498

segui as recomendações de la, validei marcações, css, mta coisa voltou para o lugar e ficaram corretas no FF e no IE

mas ainda tem uma diferença ou outra..

 

andei lendo sobre css reset...

tentei aplicar um aqui:

* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}

 

bem simples, mas desconfigurou tudo...

como aplico o css reset, sem perder os valores que eu criei?

acredito que isso vai resolver meu problema...

desde ja agradeço...

[William Bruno 1501]

aplique assim:

* {
 margin:0;
 padding:0;
}

css reset deve ser aplicado antes do início dos trabalhos.

Vi teu outro post, mas não entendi a diferença na tua caixa de login.

[- KbeçãO - 0]

"css reset deve ser aplicado antes do início dos trabalhos."

 

então eu devia ter feito isso antes de começar o trabalho??

e agora?

 

" Vi teu outro post, mas não entendi a diferença na tua caixa de login. "

 

no IE os botões passam por cima do input "senha"

 

[William Bruno 1501]

então eu devia ter feito isso antes de começar o trabalho??

e agora?

Sim, era melhor. Nos próximos, já comece com o reset, e o DTD antes de qq coisa.

 

E agora, eu sugiro aplicar, e ir corrigindo.. pois você deve lembrar que não existem só o IE e o FF, em outros browsers, podem existir diferenças muito maiores, que você não notou.

O reset é a forma de nivelar por baixo todos os browsers.

 

 

no IE os botões passam por cima do input "senha"

 

Poste o HTML e o CSS deste trecho. Isolando do restante, apenas o fragmento referente a essa caixa de login.

[- KbeçãO - 0]

#acesso { /* Area Login */

       width: 160px;
       height: 133px;
       float: right;
       border: 2px #EAEAEA solid;
       margin: 3px;

}

#acesso fieldset {

       float: right;
       overflow: hidden;
	border: 0px;

}

#acesso legend{

       font-size: 13px;
       margin: 1px;

       }

#acesso label {

       clear: left;
       width: 110px;
       font-size: 9pt;
       margin-top: 6px;
}

#acesso input {

       margin: 0 0 5px 5px;
       width: 120px;
}


#button_container {

       float: right;
       width: 145px;
	margin-top: -13px;


}

 

perdão, esqueci o html:

 

<div id="acesso" align="center">

       <?php 
               if(!isset($_SESSION["usuariologado"])){

                       echo "

                               <form method='post' action='resp_log.php'>
                                       <fieldset>
                                               <legend>..:: Área do Cliente ::..</legend>
                                               <label><strong>Login:</strong></label><input type='text' size='9' name='nome'/>
                                               <label><strong>Senha:</strong></label><input type='password' size='9' name='senha'/>
                                       </fieldset>

                                       <div id='button_container'>
                                               <button class='acesso_button' type='reset'>Limpa</button>
                                               <button id='enviar' class='acesso_button' type='submit'>Entrar</button>
                                       </div>
                               </form>

                               ";

                       }else{


                               echo "

                                       <legend>..:: Seja Bem-vindo(a)::..</legend>

                                               <br />
                                               <br />
                                                       <?php echo $ico; ?>
                                               <br />
                                               <span>
                                                       <?php echo $nome; ?>
                                               </span>";
                       }
       ?>

</div>

[William Bruno 1501]

é isso mesmo.

 

o margin-top negativo, ta fazendo encavalar

#button_container {
     margin-top: -13px;

aplique o CSS reset, remova essa margin negativa.

daí corrija os demais problemas.

 

Isso vai lhe garantir um bom aprendizado, vale a pena.

[- KbeçãO - 0]

aplique assim:

* {
 margin:0;
 padding:0;
}

css reset deve ser aplicado antes do início dos trabalhos.

Vi teu outro post, mas não entendi a diferença na tua caixa de login.

 

eu aplico esse codigo n index??

pq eu criei um css separado para cada pagina, para ficar mais facil de fazer alterações...

 

<link rel="stylesheet" href="css/estilos_index.css"/>
<link rel="stylesheet" href="css/css_cert.css"/>
<link rel="stylesheet" href="css/css_resp.css"/>
<link rel="stylesheet" href="css/css_cliente.css"/>
<link rel="stylesheet" href="css/css_contato.css"/>
<link rel="stylesheet" href="css/css_editorial.css"/>
<link rel="stylesheet" href="css/css_parceiros.css"/>
<link rel="stylesheet" href="css/css_premios.css"/>
<link rel="stylesheet" href="css/css_portifolio.css"/>

 

entao eu aplico esse codigo na index, ou nas folhas de estilo ??

[Evandro Oliveira 331]

Se beneficie da cascata. Inclua o reset antes da folha de estilos principal:

 

atualmente

 

<link rel="stylesheet" type="text/css" media="all" href="css/estilos_index.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />

 

como deve ficar:

 

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/estilos_index.css" />

 

Você também pode fazer um @import.

 

 

Na primeira linha do arquivo css/estilos_index.css, adicione:

@import 'css/reset.css'

 

 

 

[- KbeçãO - 0]

Na primeira linha do arquivo css/estilos_index.css, adicione:

@import 'css/reset.css'

 

hmmmmmm

ja comecei a achar o caminho.....

logo logo este post estara resolvido,

postarei minha evoluções aqui,

a respeito da outro topico, desculpe a minha duplicação e agradeço o fechamento do topico antigo.

É que minha dúvida partiu para outro rumo..

por isso abri esse tópico...

 

qual reset vcs usam ???

[Evandro Oliveira 331]

http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/

[- KbeçãO - 0]

opa !

valeu a resposta...

fiz como você falou :

 

//estilos_index.css

@import 'css/reset.css'

 

ja arrumei o site..

amanha vou coloca-lo no ar, e passar o link para vcs me darem suas opiniões

=D

pode fechar o tópico...