CSS öröklési hiba
Sziasztok!
Eddig úgy éreztem, hogy a css öröklési alapjait tudom, de most elbizonytalanodtam. Itt egy "félig" teszt oldal:
CSS Teszt
Probléma no. 1.: a "Felhaszn. név" és "jelszó" fontmérete. Ezt honnan veszi és miért? ( a css-ben szándékosan elcseszett pici fontméret van )
Probléma no. 2.: IE-ben miért nincs középen a div?
Illetve egy általános kérdés: hogyan is megy a css-ben az öröklés ( törölheti valami az öröklést? ), illetve ha egy adott elemen van "style" attribútum is és "class" is, akkor az hogyan kerül összeféslülésre?ű
Előre is köszi,
Tom
■ Eddig úgy éreztem, hogy a css öröklési alapjait tudom, de most elbizonytalanodtam. Itt egy "félig" teszt oldal:
CSS Teszt
Probléma no. 1.: a "Felhaszn. név" és "jelszó" fontmérete. Ezt honnan veszi és miért? ( a css-ben szándékosan elcseszett pici fontméret van )
Probléma no. 2.: IE-ben miért nincs középen a div?
Illetve egy általános kérdés: hogyan is megy a css-ben az öröklés ( törölheti valami az öröklést? ), illetve ha egy adott elemen van "style" attribútum is és "class" is, akkor az hogyan kerül összeféslülésre?ű
Előre is köszi,
Tom
táblázat
1. A táblázat nem örökli a body-ra beállított betű méretét, helyette az alap betű méret (amit a böngésző ehhez a felbontáshoz rendelt) érvényesül.
(megoldás pl.: html, body, table {font-size: 10px})
2. Nem tudom, esetleg próbáld meg csak margin: auto-val..
Felül definiálódik az örökölt tulajdonság:
a, ha a html-ben, style-t állítasz be, az felül definiálja a class értékeit,
b, ha pontosabban definálod az elem "helyét", akkor az általános szabályt szintén felülírod (body div table a {..} - a div-en belüli táblázaton belüli link-ekre érvényes - bármekkora mélységben igaz)
c, illetve, ha az "important" kulcsszót használod
Ajánlott a telepítened a Firefox alá egy Firebug nevű kiterjesztés, mert abban a "css" részben jól látszik, hogy milyen class-ok érvényesülnek egy elemen illetve milyen class-ok, milyen értékeket bírálnak felül, stb.
üdv, Gábor
Azt nem értem miért kinlódsz...
Az öröklődés addig müködik, amig valamivel fölül nem irod névlegesen, tehát, hogy megértsd, ha én a body-nak beallitok 7px font-sizeot akkor minden szövegnek 7px mérete lesz, addig mig nem akarod példaul valahol megváltoztatni, p.nagyobbSzoveg font-size:12px. Itt erölködés nélkül meg is fog változni. Na most ha html-ben van beallitva egy style a bizonyos elementre, akkor elöbb a hmtl-ben levőt fogja elfogadni, ha csak nem leszel elég erőszakos css-ben, ezért soha semmiféle körűlmények között nem használok style-t html-ben, a javascriptet sok esetben erősen gátolja.
Innen következtetni lehet a nálad megjelenő kis probléma eredetére, általában a böngészőknek sajat alapstilus beallitasuk van az inputokra (azért néz ki ugy a submit ahogy kinéz, meg az input is). Nálad az alap böngésző stilust kell lecserélni 7px-re mivel alapban 12px asszem. Te nem állitottál be csak az .m_keret-en belül levő dolgoknak egy általános stilust, amiutan jött a böngésző és azt fölülirta konkrétan.
Most hogy te újból átird a böngésző stilusát, meg kell nevezni azt:
input#log { font-size: 7px; }
-ide lehetne egy kis grafikont rajzolni, de a lényeg az, hogy fölülirtad ezzel az .m_keret stilust ezzel és egy szintre kerültél a böngésző stilusával. Ezen az öröklődési szinten vannak böngészők amik elsőnek a tiedet engedik, de az IE6 asszem az még mindig nem elégszik meg ezzel, ott tovább kell menni egy ujabb szintre, amolyan megerősités féleképp oda kell szurni az !important - jelző paramétert a 7px után és akkor már müködni fog, persze akkor ha mindenhol rendben az öröklődés.
Figyelni kell még a paraméterek sorrendjére is, például ha föntebb beállitom margin: 0px és lentebb meg már adok neki egy 10px-t akkor a böngészőben a 10px lesz az érvényes. Igy lehet a futtási sebességet is növelni, minimizálni a css-t, vigyázni az ismétlődő elementekre, display: block mindig a többi paraméter előtt legyen és stb.
Remélem nem tünik nagy kavalkádnak amit ideirtam, mert nekem úgy néz ki, de remélem segit.
PS.: hogy középre igazitsd a divet egyszerüen tedd be a formot is a divbe és a marginodnak mindenkép valami hasonlonak kell lenni: néhany px auto néhany px auto, másrészt figyelj oda hogy jó doctypeot használj, ha nem jo a doctype IE alatt nem engedi középre tenni.
A megoldás
Nem kínlódtam, csak volt/van időm megérteni és megoldani a problémát :) Nyílván át tudom hackelni kényszerített stílusokkal, de az csak fél megoldás.
Viszont sok kísérletezgetés/stb után kiderült, hogy mi volt a problémája. echo kolléga jól mondta, a megfelelő doctype fontos. Na, iit a doctype nem volt jó, hiányzott a "verziója" ( legalábbis ha jól tudom, hogy a második paraméter az az ). Ezt kijavítva már rendesen megy az öröklés.
Kapcsolódóan: mit is mond meg pontosan a doctype és az egyes doctype-ok mit csinálnak?
Köszi az eddigi segítséget!