1. Błąd podwójnego marginesu

To błąd występujący wyłącznie w Internet Explorerze. Gdy elementowi nadamy atrybuty margin oraz float w tę samą stronę, wartość marginesu zostaje podwojona. Najprostszym rozwiązaniem tego problemu jest dodanie do pliku CSS następującego wiersza: display: inline. Twój kod powinien więc wyglądać tak:

2. Minimalna wysokość ignorowana w IE

Atrybut min-height działa w Mozilla Firefoksie, w przeglądarce Microsoftu jest natomiast ignorowany. Rozwiązaniem jest nadanie atrybutu height, który jest odpowiednikiem min-height w IE. Problem został rozwiązany w IE7.

3. Wyśrodkowanie środkowego bloku na trzy sposoby

Witryny WWW najczęściej mają szerokość mniejszą niż ekran monitora, a ich zawartość jest wyśrodkowana. Niestety, nie da się tego zrobić intuicyjnym poleceniem text-align:center, trzeba więc stosować inne sposoby.

I. Sposób najwygodniejszy: <div> zostaje wyśrodkowany, gdy jego parametry left-margin i right-margin są ustawione na auto. Dzieje się tak, ponieważ – zgodnie z modelem CSS2 – jeśli oba marginesy są ustawione na auto, ich wartość jest równa. (Działa to w IE od wersji szóstej, tylko gdy przeglądarka jest w trybie standard compliant). Przykład wykorzystania:

II. Wyśrodkowanie wykorzystujące wartości procentowe – sposób najprostszy. Przykładowo: gdy środkowy <div> ma mieć 60% szerokości strony, to oba marginesy zajmują 40% – więc margines lewy to połowa, czyli 20% strony. Analogicznie można wyśrodkować elementy w pionie.

III. Wyśrodkowanie przy użyciu wartości absolutnych. Musimy znać szerokość elementu, który chcemy wyśrodkować. Załóżmy, że będzie to 500 px. Przesuwamy go więc o 50% w prawo, tak aby jego lewa krawędź była w środku strony. Cały trik polega na takim ustawieniu lewego marginesu, aby wydawało się, że <div> jest wyśrodkowany. Ustawiamy left-margin na -250 px, czyli –(500 px/2). Oczywiście, ten sam sposób da się także zastosować do wyśrodkowania elementu w pionie.

4. Wyśrodkowanie elementu w pionie

Zastosowanie zwykłego vertical-align:middle może dać niespodziewane rezultaty, gdy tekst ma wiele linii. Oczywiście, da się temu zapobiec, jeśli się skorzysta z elementu <div>. W tym celu tworzymy trzy zagnieżdżone znaczniki <div>, a następnie wewnątrz ostatniego umieszczamy znacznik <p> z tekstem.

5. Problemy z kolumnami

To bardzo wygodny i elegancki sposób prezentowania treści, ale często powoduje problemy. Weźmy pod uwagę taki kod:

W założeniu chcemy osiągnąć stronę podobną do tej na górnym schemacie i w większości przeglądarek ta strona będzie tak właśnie wyglądała. Jednak w IE sidebar ucieka do dołu, poniżej kolumny main. Problemem okazuje się obrazek banner.gif, którego szerokość jest większa niż szerokość kolumny. Równie dobrze to samo może się stać, gdy do lewej kolumny wpisany zostanie zbyt długi tekst, którego nie można przełamać (np. adres URL – należy o tym pamiętać, akceptując treści wpisywane przez użytkowników witryny).

Ten problem jest powodowany przez pogwałcenie przez IE domyślnych ustawień atrybutu overflow, którego domyślną wartością jest visible. Dzięki temu wszystko, co nie mieści się w kolumnie o określonej wielkości, może poza nią wystawać – i tak odbywa się to w Mozilla Firefoksie. Internet Explorer, niestety, próbuje rozszerzyć lewą kolumnę, przez co brakuje dla niej miejsca i zostaje ona przesunięta w dół.

Dla tego problemu istnieją dwa rozwiązania: pierwsze to ustawienie dla lewej kolumny overflow na hidden – wtedy wszystko to, co wystaje poza kolumnę, zostaje przycięte; drugie rozwiązanie polega na wpisaniu dwóch następujących definicji: word-wrap: break-word; – spowoduje to, że tekst zostanie odpowiednio złamany na fragmenty mieszczące się w zadanym polu. Drugie rozwiązanie działa również dla odnośników, nie jest natomiast obsługiwane przez Firefoksa 3.

6. Pozycjonowanie elementów

Młodzi adepci stylów CSS mają często problem z wyborem typu pozycjonowania danego elementu. Po pierwsze, należy zrozumieć, czym jest pozycjonowanie bezwzględne. Chodzi tutaj o to, że wybrany element jest zabierany ze swojego miejsca i przenoszony dokładnie tam, gdzie tego chce webmaster. Dobrze zobrazuje to poniższy przykład: tworzymy znacznik <div> w kształcie czerwonego kwadratu i umieszczamy go bezpośrednio w <body>. Do arkusza stylów dodamy następujące linie:

Efekt będzie taki, że kwadrat zostanie umieszczony 40 pikseli od dołu strony i 40 pikseli od prawej krawędzi ekranu, cokolwiek by się tam znajdowało.

Użycie pozycjonowania względnego spowoduje, że kwadrat zostanie przeniesiony w górną część ekranu. Dzieje się tak dlatego, że elementy zostaje przesunięty o 40 px w lewo (od prawej krawędzi) oraz 40 px w górę (od dołu) w stosunku do nadrzędnego elementu pozycjowanego względnie lub do krawędzi monitora (gdy takiego brak). Przykład:

7. Wszystko, co musisz wiedzieć o elementach pływających (float)

To prawdopodobnie najmniej intuicyjny element w całym CSS, który jest powodem najczęstszych narzekań webmasterów. Niemniej problemem nie jest sama teoria elementów pływających, a sposób, w jaki są one interpretowane przez przeglądarki. Oto najważniejsze fakty, o których należy pamiętać, budując stronę na bazie warstw pływających:

• Pływający fragment umieszczamy wewnątrz standardowej treści, a następnie przesuwamy jak najdalej w prawo lub w lewo, a treść strony może opływać ten element. Kiedy jednak element zostanie „wyjęty” z treści (np. przez nadanie mu bezwzględnej pozycji), jest on ignorowany, a reszta treści może zająć jego miejsce (pod lub nad nim).
• Nie należy definiować elementu pływającego bez zadeklarowania jego szerokości (wyjątkiem są zdjęcia), gdyż efekty tego mogą być nieprzewidywalne.
• Należy pamiętać, że element pływający może zostać dociągnięty tylko do jednej krawędzi i nie da się go umieścić na środku strony.
• Gdy brakuje miejsca na element pływający, zostaje on przesunięty w dół, dopóki będzie on mógł być osadzony bez przeszkód.
• Element pływający nigdy nie wystaje ponad linię, w której został utworzony.
• Minusem korzystania z elementów pływających jest to, że gdy są one wielokrotnie zagnieżdżone, w praktyce każda przeglądarka może to inaczej zinterpretować.
• Jeśli umieścimy po definicji elementu pływającego blok tekstu, to będzie go on opływał. Gdy chcemy, by tak się działo, należy nadać mu atrybut clear. Dzięki atrybutowi clear:left tekst nie będzie opływał elementów pływających przyciągniętych do lewej krawędzi. Analogiczny efekt osiągniemy dzięki clear:right, dzięki clear:both tekst nie będzie natomiast opływał żadnego elementu pływającego.
• Domyślnie element, w którym umieszczony jest float (zwany dalej kontenerem), nie rozszerzy się tak, aby go objąć.

Istnieją dwie możliwości, by zawrzeć cały float wewnątrz kontenera. Prostsza z nich to umieszczenie po każdym elemencie pływającym pustego znacznika <div> z definicją clear:both.

Druga metoda jest o wiele bardziej profesjonalna i nie wymaga wpisywania jakichkolwiek dodatkowych znaczników <div>. Wystarczy do arkusza CSS dołączyć następujący fragment definicji:

Teraz do znacznika <div>, który służy jako kontener, wystarczy przypisać klasę clearfix. Trik ten działa we wszystkich przeglądarkach zgodnych ze standardami, a dzięki ostatniej linii arkusza nawet w Internet Explorerze.