Como fazer CSS para o IE?

[Celinho 0]

Pessoal é duvida basica pra quem ja trabalha com isso, mas eu que nunca fiz não entendo =/

 

Procurei no google e não achei nada que me explicasse essa duvida... No Chrome e FF o site está certinho mas no IE tem muitos elementos em posições erradas e bordas dos links.. Como que eu faço pra criar um css pra arrumar isso?

 

eu tentei criando outro arquivo e chamando ele, só que mesmo colocando os códigos não mudava nada.. como eu chamo esse novo css?

 

Obrigado ae quem puder ajudar

[André do Vale 76]

Já que você afirmou estar iniciando, sugiro muita leitura, a exemplo de:

 

http://www.maujor.com/

http://www.maujor.com/tutorial/joe/cssjoe1.php

 

Dicas pessoais:

 

- Validação HTML e CSS;

- Reset CSS (indico o do Meyer);

- Adapte-se ao código para que um código limpo funcione na maioria dos navegadores;

- Evite HACKs ao máximo.

[Celinho 0]

Eu assisti bastante video-aula antes de começar a desenvolver esse site que to fazendo, e nessas video-aulas não falavam do css pro IE =/ .. por isso que to confuso com isso e to empacado, pq quero deixar o visual certinho pra depois partir pro php

[André do Vale 76]

Vamos por partes então, Celinho. Poste o link do que já fez, para que possamos analisar, e a partir daí lhe ajudar, e ajudar também a evitar um arquivo extra só para o IE. :thumbsup:

[Celinho 0]

Então eu to fazendo em localhost, não publiquei ainda =/

 

Mas os principais problemas no alinhamento é no form de contato, que ta grudado no rodapé e nos links que não consegui tira aquele efeito padrão que vem nele, aquele contorno azul(no caso das imagens)...

 

o que eu quero é só puxar o form de contato pra cima, tirar o contorno do link da imagem e dar uma separaçãozinha no menu.. são os unicos erros que tem no IE que nos outros não tem

[André do Vale 76]

Bom, a imagem cai naquele conceito do reset que citei antes. Você pode fazer um teste no início do seu CSS incluindo:

 

img { border: none }

 

O resto fica complicado sem saber como está seu código. Tente postar ao menos a marcação + CSS direto aqui (se puder, claro). :thumbsup:

[Celinho 0]

aee da imagem sumiu, eu só tinha colocado a border no campo da imagem junto com a div.. o código do form eu vo posta aqui

 

  <div id="formcontato">
               	<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
                   	<ul>
                       	<li><label>Nome</label>
                           <input name="nome" type="text" id="nome" class="text"/>
                           </li>
                           <li><label>E-mail</label>
                           <input name="email" type="text" id="email" class="text"/>
                           </li>
                           <li><label>Assunto</label>
                           <input name="assunto" type="text" id="assunto" class="text"/>
                           </li>
                           <li><label>Mensagem</label>
                           <textarea name="mensagem" cols="50" rows="10" id="mensagem"></textarea>
                           </li>
                           <input name="enviar" type="submit" class="btn" id="enviar" value="ENVIAR"/>
                       </ul>
                   </form>
               </div>

 

#formcontato{float:left; padding:5px 10px; margin-top:30px; margin-bottom:20px;}
#formcontato ul input {outline: none;}
#formcontato ul{list-style:none; margin:0; padding:0;}
#formcontato ul li{margin:0; padding:0; background:none; border:none; display:block; clear:both;}
#formcontato label {margin:0; width:110px; display:block; padding:10px 0; color:#666; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:capitalize; float:left;}
#formcontato input.text {width:200px; border:1px solid #e8e8e8; margin:10px 0; padding:5px 2px; height:16px; background:#fff; float:left;}
#formcontato textarea {width:410px; border:1px solid #e8e8e8; margin:10px 0; padding:2px; background:#fff; float:left; outline: none;}
#formcontato ul .btn{margin:0 110px; margin-bottom:44px; padding:15px 40px; background:#d82b31; font:16px Tahoma, Geneva, sans-serif; color:#FFF; outline: none; -webkit-border-radius:4px;/*chrome*/ -moz-border-radius:4px;/*mozila*/ border-radius:4px;/*Opera10.5+*/ border:1px solid #d82b31;}
#formcontato ul .btn:hover{background:#000; -webkit-border-radius:4px;/*chrome*/ -moz-border-radius:4px;/*mozila*/ border-radius:4px;/*Opera10.5+*/ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; border:1px solid #000;}

 

<meta http-equiv="X-UA-Compatible" content="IE=8" />

 

eu coloquei esse meta só e resolve o posicionamento do form só que o padding do menu para de funcionar e não consigo mais aumentar ele.. alguma dica pessoal?