Autor Zpráva
quatzael
Profil
Tady je živá ukázka na jsfiddle

Jde o jeden obalový div a v něm tři vnitřní inline-block divy s naznačenou vnitřní strukturou. Všechny mají nastavenou height: 36px;

První dva vnitřní divy se mi posouvají dolů a vyčuhují ven z toho obalového divu. Jen poslední div leží přesně v tom obalu.

Tady v tom fiddlu je to jen nepatrný rozdíl. Ale v originálu to je o půl výšky obalovýho divu seknutý dolů.
Když ale přepnu prohlížeč na režim IE7 tak je to podobný jako tady na tom fiddlu.

S největší pravděpodobností to nějak způsobuje ten textový obsah prvních dvou divů, ale nezdá se mi, že bych tam měl nastavovat nějaký position: absolute;, aby to fungovalo.
Str4wberry
Profil
Problém v IE7 dělá asi tohle.

Druhý problém by mohl způsobovat nedostatečný line-height pro element s nastavenou height. Doporučil bych výšku nezadávat, ale použít místo ní právě line-height.
quatzael
Profil
Str4wberry:
O problém s IE7. Ve svým originálu *zoom: 1; mám, jen jsem to nechtěl dávat sem, protože by se to tam zbytečně pletlo a stejně jsfiddle v IE7 nefunguje.

Line-height můžu vyzkoušet.

Doporučil bych výšku nezadávat, ale použít místo ní právě line-height.
Ale u čeho? U toho obalu nebo vnitřních divů? Nebo u všeho?


Zkoušel jsem nastavovat ten line-height a nedělá to vůbec nic. Navíc v reálu tam mám podobně málo textu jako v tý fiddle ukázce a i v ní samotný se to drbe, i když ne tolik, jako v reálu.
Ale neřekl bych, že větší nebo menší počet textu má na to nějaký vliv. I v originálu mám jen jednořádkový texty v těch divech. Když tam nějakej text je, je to takhle (trošku víc) rozhozený a je to ok srovnaný jen když veškerej text dám pryč.
margin
Profil *
Nevím, zda pomohou hrátky s line-height, ale pomůže, podobně jako u obdobně jako u obrázků, třebas:
.obal div {
  vertical-align: top;
}
Já osobně bych to dělal postaru floatem a pokud by kvůli obrázkovému pozadí nemusela být pevná výška, tak bych přidal padding.
Str4wberryho rada s line-height je také použitelná, line-height stačí deklarovat pro obalový element, tato CSS vlastnost se dědí.
quatzael
Profil
quatzael:
Zkoušel jsem nastavovat ten line-height a nedělá to vůbec nic.
Omylem jsem to přiřadil jinýmu elementu, takže to nic nedělalo.
Hejbe se to, ale zároveň to posouvá ten text dolů, bylo by to asi složitý vyrovnávat.

margin:
vertical-align: top; je to pravý!! Že mě to nenapadlo..

Supr, moc dík!!

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: