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?
- 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.
- 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…