Sau ce anume sa faci atunci cand nu mai stii ce sa faci - Partea 1

Materialul este, in mare, o traducere dupa originalul postat de Dave Shea.

Cand ai indoieli, valideaza.

La momentul debugului, poti scapa de multe batai de cap validand in primul rand codul HTML. Erori de sintaxa XHTML/CSS pot cauza erori in layout.

Construieste-ti CSS-ul in cele mai avansate browsere inainte de a testa si in altele, nu invers.

Daca iti testezi site-ul intr-un browser care intelege gresit unele specificatii codul tau se va baza pe eroarea (sau erorile) browserului. La momentul in care vei testa site-ul si pe browsere comforme cu specificatiile W3C te vei simti frustrat datorita faptului ca nu e totul afisat cum doreai. Incepe de la perfectiune si corecteaza erorile din browserele vechi. In felul asta vei avea codul mai corect si cu suport multiplu (Firefox, Mozilla, Safari, Opera).

Cand folosesti floats pentru layout-ul paginii, nu uita de clear.

Floats-urile sunt smechere, nu se actioneaza tot timpul asa cum te-ai astepta. Daca un element cu proprietatea float depaseste marginea obiectului in care este continut sau nu se manifesta asa cum te-ai astepta, asigura-te ca e corect ce anume vrei tu. In probleme asemanatoare consulta tutorialul lui Eric Meyerl.

Marginile dispar; pune padding sau border.

Se poate intampla (miraculos) sa apara spatiu unde nu te astepti sau, dimpotriva, acolo unde ar trebui sa existe, sa lipseasca cu desavarsire. Daca folosesti margini, disparitia spatiului e cea mai probabila. Andy Budd explaica la ce te poti astepta (minunatele carari ale CSS-ului).

Evita padding/borders in combinatie cu o latime fixa.

IE5 e varza in ceea ce priveste interpretarea box-model, chestie care face praf, litaralmente, designul. Exista cateva metode pentru a-l pacali , dar mai bine aplici padding elementului parinte, cel care contine elementul cu latime fixa.

Evita flashurile din IE.

Daca te bazezi pe @import pentru styleshets-urile externe, mai devreme sau mai tarziu o sa observi cum IE da flashuri. Se rezolva cu un script gol. Mai multe despre cum eviti.

Nu te baza pe min-width in IE.

IE pur si simplu nu suporta. Dar, in schimb considera width ca si min-width intr-o anumita masura. Oircum, cu putina filtare in cod pentru IE poti ajunge la acelasi rezultat, pana la urma.

Daca esti in incurcatura, scade latimea.

Printre minunile CSS se numara si suma 50% + 50%, care iti poate da 100.1%, uneori. Asta cam strica layout-ul in anumite browsere. Ce e de facut? Incearca un 49%, sau chiar 49.9% si vezi ce iti iese.

Continutul afisat aiurea in IE?

Cica poti avea bugul Peekaboo. Citeste Position is Everything pentru raspunsuri.

Ai grija cu stilizarea linkurilor daca folosesti ancore.

Daca folosesti o ancora clasica in cod (<a name="anchor">) o sa observi ca are pseudo-clasele :hover si :active. Pentru a preveni, ori folosesti id-uri pentru ancore, ori stlizezi cu slightly more arcane

Verifica daca ce vrei tu e posibil.

Exista cateva extensii CSS specifice unor browsere care nu sunt oficiale. Daca incerci sa aplici filtrarae de IE sau stilizarea scroll-barului, folosesti instuctiuni care nu merg in afara browserelor IE. Daca validatorul iti spune ca folosesti un cod inca nedefinit, crede-l pe cuvant, e vorba de cod specific unui browser.

Taguri:CSS, Wordpress