Dnevnik eklektika - Piše Dragan Babić

Problem u Safariju - odsecanje teksta

Problem

Dok sam radio na razvoju sajta za firmu naleteo sam na jedan vrlo čudan problem – Safari je iz nekog razloga odcsecao desnu ivicu button elemenata za nekih 10 piksela ukoliko je njegovom parentu dodeljena osobina text-align: right;.

Pametnije stilizovanje button elemenata

Kada stilizujete button elemente i hoćete da im promenite izgled, jako je zgodno znati jednu zanimljivu osobinu button elemenata – a to je da im možete dati i širinu i visinu, a da oni ostanu inline level elementi. (Tačnije, što se browsera tiče oni su inline-block level elementi, ali da ne cepidlačimo.)

Evo primera direktno sa sajta preduzeća Superawesome:

.uniForm .submitButton{
  width: 48px;
  height: 26px;
  margin: 0; padding: 0;
  line-height: 26px;
  border: none;
  text-indent: -9999px;
  background: url(../images/button_send.png) 0 0 no-repeat;
}

Nadam se da ćete ovu tehniku koristiti u slast, jer je stvarno zgodna – nije potrebno floatovanje dugmadi (a samim tim ni čišćenje floatova) da bi im dali željene dimenzije, već običan text-align na parentu i voila.

Nazad na Safari problem – kasnije posle malo poljeg pregleda sam primetio da problem uopšte nije tamo gde sam ga tražio (u button i ostalim form elementima) već je prisutan i u običnim paragrafima teksta, kao što možete i videti na priloženoj ilustraciji.

Rešenje

E sada, ja pravo da vam kažem nemam blage veze šta je uzrok ovome, sumnjam na overflow: hidden;, a siguran sam da je width: auto; koji je stajao na blok level elementima čiji sadržaj biva odsecan. Kako sam provalio da je do širine elementa ogmah sam probao da stavim width: 100%; – no go. Uspeo sam da se otarasim odsecanja tek kada sam dodao širinu spornim elementima u pikselima.

Zaista ne znam do čega je ovo ponašanje – i u čemu je razlika u navođenju vrednosti za širinu u različitim jedinicama. Ovako nešto bih očekivao od Internet Explorera, ali ne i od Safarija. Bilo kako bilo, stao sam mu u kraj, a vi evo ovde imate i jedno od potencijalnih rešenja za isti ili sličan problem, pa nadam se da će koristiti još nekom.

• « Verbal Driver
• Web dizajn galerije - vrede li čemu? »

Komentari na ovaj unos 2

1. Pedja D. kaže 17/08/07 10:59 AM

   Da se pojavi jos koji browser, pa cross-browser compatibility moze postati nauka za sebe. Ne znam za tebe, ali ne pamtim kad je sve teklo kao živa – da je milina raditi.

2. Nemanja Cosovic aka sirNemanjapro aka Шљива kaže 07/09/07 12:10 AM

   Jesi li prijavio error kroz Appleov bug sistem?
   Meni se desava da Safari drugacije vidi fontove ( malo ih bolduje ), sto bi Mac fanovi rekli, pravilno ih vidi, ali ako trebate tekst bas da namesite kako treba, moracete da ga seckate ( tipa na kraju zeljenog reda ).
   Ne bih sad da povezujem, ali prijavio sam dosta greska za Safari ( za PC ) i vecina je u novoj pod verziji ispravljena, da ne kazem sve.

Komentariši unos “Problem u Safariju - odsecanje teksta”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.