Dotaz: CSS vržený stín - problém s Firefoxem

[otula]

Přílohy:

• shadow-opera.png (9355 bytů)
• shadow-chromium.png (6327 bytů)
• shadow-ff.png (7829 bytů)

Dokážete mi poradit, jestli se dá řešit problém s vrženým stínem u Firefoxu? Trošku jsem chtěl designově upravit formuláře, ale Firefox mi škaredě háže klacky pod nohy. Viz přílohy. Opera i Chromium jsou v pohodě (Opera sice neudělá vnitřní přechod, ale aspoň to nijak nemrší). Zato Firefox odsune stínovanou oblast až na hranici formuláře (úplně kašle na to, že je to vlastnost přidělená k fieldset), což vypadá nechutně.

Zjednodušený kód formuláře je zde:

<form action='' method='post'>
<fieldset>
<legend>Login</legend>
<label for='auth_login'>Login: </label><input id='auth_login' />
<label for='auth_heslo'>Password: </label><input type='password' id='auth_heslo' />
<input type='submit' value='Login' />
</fieldset>
</form>

CSS:

fieldset {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #999;
/* přechod vevnitř */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 
/* stínování */
-webkit-box-shadow:0px 0px 40px #ccc;
-moz-box-shadow:0px 0px 40px #ccc;
box-shadow:0px 0px 40px #ccc;
}

---

---

Odpovědi

[otula]

Hm, tak už jsem na to poté, co jsem dotaz položil, přišel. Hledal jsem totiž problém ve form, zatímco problém byl v legend. On teda není problém v popisku, ale v tom, že Firefox má problém s popiskem. Takže řešením je například ostylovat legend jako float a problém je vyřešen.

Vždycky jsem nadával na MSIE, že je kvůli němu spousta práce navíc, ale že mne bude s*** i Firefox, to jsem netušil…

[voda]

Je to nahlášený bug.

A ještě přidám gradient pro operu: background-image: -o-linear-gradient(top, #EEE 0%, white 100%);. A přidal bych i verzi bez vendor prefixu, aby to nepřestalo někdy v budoucnu fungovat.

[otula]

Díky za doplňující info.