Osobná stránka a debilníček

Fieldset a background-color

Na svojom blogu som mal jeden problém s background-color pri <fieldset>.

Pri komentároch mám použitý formulár, ktorý som upravil do grafickej podoby celého webu. To by nebolo nič čudné, veď to neodporuje žiadnemu pravidlu, ale problém nastal pri pohľade na tento formulár v IE a Opere.

Keďže som pre <fieldset> nastavil background-color stalo sa to, že toto pozadie presahuje nad <legend> a nevyzerá to vôbec dobre.

Zhodou okolností, presne tento istý problém sa akurát riešil na Interforum.interval.cz, kde bol odkaz na jedno jednoduché riešenie.
Riešením je nastaviť pre <fieldset> position: relative;
a pre <legend> position: absolute; top: –10px;

fieldset {
 position: relative;
 height: 200px;
 background: #ffc;
 padding-top: 20px;
}
legend {
 position: absolute;
 top: -10px;
 background: #fcc;
 border: 1px solid #000;
 padding: 0px 5px;
}

<fieldset>
  <legend>Tu je legend</legend>
  <p>Tu je samotný formulár s farebným pozadím</p>
</fieldset>

Toto riešenie je plne funkčné v IE a vo Firefoxe, v ňom to mimochodom bolo funkčné aj pred tým. Neviem a ani sa mi nechce zisťovať, ktorý s prehliadačov to robí dobre a ktorý zle, mne ide len o zistenie funkčného riešenia.

Možno ste si všimli, že som vynechal Operu a ak áno tak je to kvôli tomu, že v Opere sa mi nepodarilo rozbehať position: relative; na <fieldset>.

Preto som obalil formulár do jedného <div>-u ktorému som nastavil position: relative;

<div id="formular">
 <fieldset>
  <legend>Tu je legend</legend>
  <p>Tu je samotný formulár s farebným pozadím</p>
 </fieldset>
</div>

#formular {
 position: relative;
}

JohnyB tam tiež napísal jedno riešenie, ale toto mi nefungovalo správne v IE. Napravo od <legend> vznikne asi 20px veľký voľný priestor, ktorý opäť kazí dobrý dojem.

V rámci toho, že kvôli Opere bolo treba obaliť formulár do zbytočného <div>-u, napadlo ma spojiť tieto dve riešenia do jedného a čuduj sa svete ono to funguje.

fieldset {
 position: relative;
 height: 200px;
 background: #ffc;
 padding-top: 20px;
}
legend {
 position: absolute;
 top: -10px;
 background: #fcc;
 border: 1px solid #000;
 padding: 0px 5px;
}
html>body legend {
 position: relative;
 top: -20px;
}

Páči sa vám tento článok, zalinkujte ho:

««« Predchádzajúci text: Básnička o SuperStar Následujúcí text: Dve etické otázky »»»

Verzia pre tlač | 2 komentáre | 1732x