Diabeł tkwi w szczegółach: px, pt

Każdą stronę staram się przetestować na kilku przeglądarkach. IE6, IE7, FF i Opera — niestety tylko na PC. Dorwałam wreszcie maca i co się okazało? Firefox na macu kaprysi. Dobre dwa dni zajęło mi dojście, gdzie tkwił błąd.

Założenie projektowe było takie, że w portfolio pod aktywną zakładką (tekstowe menu poziome) wyświetla się czerwona kropeczka. W Firefoksie na Macu też się wyświetlała, a jakże, ale z przesunięciem w prawo! Jednym słowem, nie było do końca jasna, w której zakładce jesteśmy. Uwaga: na tym samym kompie, na Safari, wszystko w porządku.

Po bliższym przyjrzeniu się zjeżdżającej kropeczce stwierdziłam, że ona akurat jest na swoim miejscu – problem leży w menu, które w różnych przeglądarkach ma różną wielkość wyświetlania (tekstu).

Gdzie tkwiło zło?

  1. W zewnętrznym pliku CSS miałam dwa (a nawet trzy) razy zdefiniowany format felernego tekstu – najpierw dla diva, potem dla linka (zwykłego i w stanie hover). Usunęłam dublujące się zapisy.
  2. W plikach była prawdziwa żonglerka miarami: raz px, raz pt. Dla menu zmieniłam jednostki z punktów na piksele.

No i wszystko zadziałało prawidłowo. Ha! Niby wiem, że diabeł tkwi w szczegółach, ale żeby w takich?

PS Oczywiście to chwilowe zwycięstwo nic nie znaczy, za chwilę otworzę stronę jeszcze gdzieś indziej i znowu coś wyskoczy… Ech…