Corrigindo bug do IE na aplicação de fundo na tag Fieldset

O html possui um tag que é pouca usada porem é muito interessante, ela cria um box como mostra o exemplo abaixo:

field

No internet explorer colocar um fundo via css na tag fieldset gera um problema que no firefox não acontece, confira na imagem abaixo:

fieldsets_problema

Para variar o IE dando dor de cabeça, a solução foi coloca um IF no css, novidade para mim… segue a solução:

<style type="text/css">
label {
float: left;
width: 6em;
margin: 0 .5em 0 0;
text-align: right;
}
form div {
margin: .8em 0;
}
fieldset {
margin: 0 0 1em 0;
background: #F0F0F0;
}
legend {

background-color: #FFFF00;

border: 1px solid #000000;

}

</style>
<!–[if IE]>
<style>
fieldset {
position: relative;
}
legend {
position: absolute;
top: -.5em;
left: .2em;
}
</style>
<![endif]–>

Be the first to comment

Leave a Reply

Seu e-mail não será publicado.


*