[Resolvido] Defeitos especiais em CSS

[gustavopinent 0]

Olá. Não se trata de efeitos complexos, mas mesmo assim criaram a seguinte situação com os botões e um fieldset:

 

Eu desenvolvi assim:

 

No Firefox, as curvas não ficam tão bonitas, mas vai:

 

No IE9 a coisa complicou porque novamente o degradê estourou os limites da curva do botão criando o defeito especial. E cadê a curva do fieldset?

 

Segue o CSS:

 

fieldset.bordaDiv {
border-color:#FFF;
border-width:3px;
border-radius:20px;
-moz-border-radius:8px; /*FireFox 3*/	
}
input.btn {
display:inline-block;
background-color:#666;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#333)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #999,  #333); /* for firefox 3.6+ */ 

font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
font-style:italic;
text-decoration:none;
color:#FFF;
padding:2px 6px 2px 6px;
margin:6px;
vertical-align:middle;

border:#DDD 1px solid;
border-radius:8px;
-moz-border-radius:8px; /*FireFox 3*/	
}
input.btn:hover {
color:#DDD;
}
input.btn:active {
background-color:#000;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#999999'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #333,  #999); /* for firefox 3.6+ */ 

color:#666;
}

[Diéssica 140]

No IE9 a coisa complicou porque novamente o degradê estourou os limites da curva do botão criando o defeito especial. E cadê a curva do fieldset?

Sim, ele leu o degradê mas não leu o border-radius.

 

E o degradê é com filter:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#999999'); /* for IE */

O que o torna compatível. :)

[gustavopinent 0]

Não entendi. Ele fez a borda arredondada, ele leu o border-radius, mas o degradê passou da borda.

 

Esse degradê também me deu problema na sobreposição de layers, ele cai por cima da layer que está na frente. Acho que a solução será deixá-lo chapado para os pobres usuários de IE, ou teria algum hack?

[Diéssica 140]

Não entendi. Ele fez a borda arredondada, ele leu o border-radius, mas o degradê passou da borda.

Ah sim, me expressei errado.

 

Quis dizer que, como degrade está sendo feito com filter e não com o linear-gradient [CSS3], o border-radius não consegue entender/interpretar seus limites com o elemento.

 

Quanto à curva do fieldset, é incompatibilidade do border-radius com o próprio no IE. Foi esquecido :(

 

Esse degradê também me deu problema na sobreposição de layers, ele cai por cima da layer que está na frente. Acho que a solução será deixá-lo chapado para os pobres usuários de IE, ou teria algum hack?

Deixe "chapado" com comentários condicionais.

 

Para o problema, não sugiro e nem acredito que exista outro hack válido para degradês com CSS no Internet Explorer. Se o browser não compreende, prefira não fazer nada. Utilize IF IE.

 

:bye:

[gustavopinent 0]

Valeu Diéssica!

 

AE Bill, teu navegadorzinho continua a xumbreguice de sempre perto dos demais...