problem z safari

W ramach testów jednego z realizowanych projektów spotkała mnie niespodzianka.
Mam taką oto konstrukcję realizującą po stronie javascriptu funkcjonalość grida z podświetlanymi wierszami, a po kliknięciu na cały wiersz jest robiony redirect do wskazanego rekordu.

Niby standard, ale ja sobie wymyśliłem, że zrobię tak, iż linkiem będzie pierwszy href znajdujący się w znaczniku td w tabeli, coś w stylu:

<table class="grid">
 <tr>
  <td><a href="link.php?id=12></a>jakaś nazwa<td>
  <td>kolumna2</td>
 </tr>
</table>

Przy pomocy jquery zrobione jest to podświetlanie, klikanie, i takie tam


Z racji wielu zależności nie pracuję na Macach i generalnie poruszam się w świecie windows.
Testowałem swój kod jquery w IE, FF, Chrome, Opera ... wszystko chodzi.

Okazało się że powinienem też przetestować na Macu ... myślałem że to czysta formalność ...
Ponieważ nie mam Maca na stanie zainstalowałem sobie obraz VMware (tak ściągnąłem go z sieci, wiem że to niezgodne ... ale nie wydam kilku tyś PLN tylko po to żeby sprawdzić czy kawałek kodu chodzi na Macach, sorry)

I po instalacji  ku mojemu zdumieniu mój grid nie działał. Po włączeniu konsoli developerskiej okazało się że Safari na macu wyłożyło się na:  event.currentTarget.click();

Kurcze, długo szukałem, ale problem był gdzieś głęboko w jquery, a właściwie nie był to problem jquery tylko tego że safari w specyficznym przypadku błędnie odnosiło się do obiektu okna.

Zacząłem się trochę głowić, co z tym fantem zrobić, bo tej konstrukcji używałem już w całym projekcie, a rozwiązania widać nie było.

Po spacerze z psem poszukałem w sieci nowszego obrazu, okazało się że Mac OS Lion miał safari w wersji 6 i konstrukcja działa :-) ... na całe moje szczęście.

automatyczna wysokość dla diva w którym są floaty

Ostatnio zaskoczyła mnie pewna sytuacja:

<div style="width: 200px" class="outer">
  <div style="width: 50px; float: left">
    lorem ipsum
  <div>
   <div style="width: 150px">
    lorem ipsum
  </div>
</div>

okazuje się że w takiej konstrukcji div.outer nie zwiększa automatycznie swojej wysokości wraz ze zwiększaniem się ilości tekstu w divach wewnętrznych. Jeśli skasuje się float, to oczywiście wysokość jest zwiększana zgodnie z oczekiwaniem, ale po dodaniu float - nie.

Trochę się naszukałem rozwiązania tego problemu, dlatego go tu publikuję, żeby nie zapomnieć


Ten zewnętrzny div.outer powinien mieć dodatkowy atrybut - overflow: auto.
Co ciekawe, zawsze myślałem że overflow: auto spowoduje pojawienie się paska przewijania ... ale jak widać nie w tym przypadku, przetestowane w FF, Chrome, Opera i IE, czyli chyba OK

<div style="width: 200px; overflow: auto " class="outer">
...
</div>