CSS não funciona no IE

[Celinho 0]

Bom dia galera, to com um problema aqui.

 

Acabei meu primeiro site, e estou testando nos navegadores e o unico que está com problemas é o nosso grande amigo IE... Primeiro que a página de contato, o textarea fica muito abaixo de onde deveria ficar, enquanto que os outros campos permanecem intactos.

 

E eu gostaria de arredondar as bordas de determinados campos, colocando uma sombra leve neles, mas no IE não está funcionando igual os demais navegadores... Eu estou chamando um novo arquivo css dessa forma

 

<!--[if IE]>
<link href="estiloie.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

Está certo? Errado? Não sei ao certo como implementar o css no IE... Alguem poderia me ajudar?

 

Codigo da Pagina de Contato

	<div id="formcontato">
   	<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
       	<ul>
           	<li><label>Nome</label>
           	  <span id="sprytextfield1"><span id="sprytextfield4">
           	  <input name="nome" type="text" id="nome" class="text"/>
           	  <span class="textfieldRequiredMsg">x</span></span><span class="textfieldRequiredMsg">x</span></span>
           	<li><label>E-mail</label>
           	  <span id="sprytextfield2"><span id="sprytextfield5">
           	  <input name="email" type="text" id="email" class="text"/>
           	  <span class="textfieldRequiredMsg">E-mail incorreto.</span></span><span class="textfieldRequiredMsg">x</span><span class="textfieldInvalidFormatMsg">E-mail inválido.</span></span>
           	<li><label>Assunto</label>
           	  <span id="sprytextfield3"><span id="sprytextfield6">
           	  <input name="assunto" type="text" id="assunto" class="text"/>
           	  <span class="textfieldRequiredMsg">x</span></span><span class="textfieldRequiredMsg">x</span></span>
           	<li><label>Mensagem</label>
           	  <span id="sprytextarea1"><span id="sprytextarea2">
           	  <textarea name="mensagem" cols="50" rows="10" id="mensagem"></textarea>
           	  <span class="textareaRequiredMsg">x</span></span><span class="textareaRequiredMsg">x</span></span>
                 <input type="hidden" name="enviar" value="send" />
           	  <input name="enviar" type="submit" class="btn" id="enviar" value="ENVIAR"/>
           </ul>
       </form>
   </div>

 

CSS

/**CONTATO**/
#contatotop{}
#contatotop h2{font:26px "Open Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; color:#2a313c; margin:10px 10px;}
#contatotop p{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; margin:10px 10px;}
#formcontato{float:left; padding:5px 10px; margin-top:30px; margin-bottom:20px; height:500px; width:630px;}
#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;}

[André do Vale 76]

Cara, em suma, suas dúvidas são mais posições pessoais.

 

No meu caso:

- Não separo o CSS;

- utilizo um reset que "equaliza" todos os navegadores;

- não me importo em "validar" o arquivo CSS (utilizando assim, sem medo, hacks);

- penso só em IE8 ou superior;

- e utilizo filtros da MS para esses efeitos de CSS3, ou simplesmente ignoro outros, como 'border-radius'.

 

Com isso, quero dizer que com o tempo é você quem vai ditar como irá trabalhar.

 

Ah! A resposta em geral pro seu tópico, talvez bata com o segundo item que expus acima. Boa sorte! :thumbsup:

[Celinho 0]

Eu consegui acertar os campos que estavam fora do lugar no IE, mas ainda não consigo fazer arredondar a borda da div... estou usando o behavior:url(border-radius.htc); só que ele tira o background da div quando eu coloco ele

[Edson Carli 0]

Eu costumo não separar o css do IE e utilizar o script crossbrowser.js para poder criar hacks amigáveis, como por exemplo:

.ie #txtName{
  margin-left:0px;
}

 

Usar um arquivo de reset é sempre muito bom, principalmente em projetos que estão sendo criados (colocar um reset em projeto antigo é como abastecer um avião em pleno vôo, evite tentar). :rolleyes:

[Celinho 0]

Eu estou tentando usar uns hacks aqui pro css do IE, só que as vezes funciona e as vezes não, não sei o que acontece... No meu caso aqui é o IE8 e eu vi por aí que se usar /*\**/ depois do campo escolhido e antes do valor(text-decoration/*\**/:none;) funcionaria para o IE8... esse 'hack' é o certo para se usar? existe algum mais eficiente?

[Giovani 104]

Vale a mesma resposta: http://forum.imasters.com.br/topic/475941-usando-menu-active/page__view__findpost__p__1891582