|
Srp
03
|
Zkoušeli jste někdy nastylovat fieldset a legend? Jestli ano, víte, že je to (opět díky IE) poměrně slušný oříšek. Při pokusu nastavit fieldsetu barvu pozadí záhy zjistíte, že výsledek zdaleka neodpovídá vašemu očekávání (Barva pozadí jakoby “vytéká” mimo oblast fieldsetu). Chytré hlavy přišly na to, že je potřeba vyjmout legend z toku dokumentu pomocí position:absolute. To je hlavní podstata řešení. Ostatní nechám na vaší představivosti, resp. odzkoušení následujícího příkladu:
Mějme nějak (ve FF a Opeře správně) stylovaný fieldset a legend:
legend{
background: #ffffff;
color: #000000;
font-weight: bold;
padding: 1px 3px 1px 3px;
margin: 0;
}
fieldset{
padding: 15px 10px 10px 10px;
margin-bottom: 10px;
background: #cccccc;
border: 1px solid #dddddd;
}
Bohužel pro IE je potřeba aplikovat “workaround” (nejlépe formou podmíněného komentáře):
legend{
margin: -3px 0;
position: absolute;
top: -.5em;
left: .2em;
}
fieldset{
position: relative;
}
Závěrem bych jen rád podotknul, že ačkoliv tato finta řeší ty nejožehavější přoblémy (a výsledek je slušně uspokojující), nejedná se o dokonalé řešení. Zkuste a uvidíte o čem je řeč. IE se prostě jen tak nedá :).