Krzysztof Zawadzki – blog

CSS

Dwie istotne kwestie często pojawiające się przy kodowaniu stron to błąd IE6 dotyczący elementu z float i marginesem w kierunku float’a oraz technika zamiany tekstu (najczęściej tytułów h) na grafikę. Opiszę je pokrótce oraz zaproponuje rozwiązania, które stosuje w codziennej pracy.

Powiększony margines (ang. IE5/6 Doubled Float-Margin Bug)

Chyba wszyscy zgodzą się ze mną, że IE6 mógłby całkowicie odejść do lamusa (ciągle istnieją tzw. legacy systems). Oszczędziłoby to wiele wysiłku włożonego w kodowanie stron. Nic tak nie utrudnia życia jak brak jednolitych standardów. A tym cechuje się linia przeglądarek ze stajni giganta z Redmond. Jednym z takich braków jest dziwne zachowanie IE6 (IE7 nie posiada już tego błędu) w przypadku, kiedy element blokowy posiada wartość float w lewo/prawo oraz margines po stronie lewej/prawej (kierunek marginesu i float musi być zgodny). Margines jest “uwięziony” pomiędzy krawędzią elementu nadrzędnego oraz float’em. Przykładowo:

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
  }

Przeglądarka zgodna z ogólnie przyjętymi standardami wyświetliła by element .box z lewym marginesem 100px. Nie wiedzieć czemu IE6 wyświetla margines 200px. Co ciekawe kolejne elementy (po pierwszym wywołaniu elementu .box) zachowują się normalnie. Rozwiązanie problemu jest bardzo proste. Wystarczy dodać display: inline; do elementu .box i to wszystko! Czyli:

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px 0 5px 100px;  /*Ta wartość nadaje lewy margines 100px */
display: inline;
  }

Warto w tym miejscu wspomnieć, że elementy z float automatycznie stają się elementami blokowymi, bez względu na to jakim rodzajem były wcześniej. Oznacza to, że display: inline; jest niemalże tożsame z display: block;. Można zatem zastosować display: inline; w każdym elemencie z float, bez obaw o efekty uboczne.

Zamiana tekstu na grafikę (ang. image replacement technique)

Najczęściej wykorzystuję tę metodę, aby zamienić tytuł h1 (element tekstowy) na logo firmy (element graficzny). Korzyści wynikające z takiego zabiegu to m.in. wyższa użyteczność naszego serwisu oraz optymizacja względem wyszukiwania (SEO) Chris Coyer na swojej stronie css-tricks.com wymienia, komentuje i testuje aż 9 różnych metod podmieniania tekstu na grafikę. Ja ograniczę się do jednej metody, którą stosuję, zainteresowanych odsyłam do strony Chrisa. Mój patent na podmieniania tekstu grafiką to, przykładowo:

<!--HTML-->
<h1 id="logo"><a href="index.html">Nazwa firmy</a></h1>

/*CSS*/
h1#logo a {
display : block;
width : 100px;
height : 100px;
background : url(logo.gif) no-repeat;
text-indent : -999999px;
overflow:hidden;
outline:none;
}

Wyjaśnię pokrótce wykorzystane czynności. W pierwszym bloku kodu (html) tworzę tytuł h1 z odnośnikiem “Nazwa firmy” linkującym do pliku “index.html”. Jeśli chodzi o styl, skomentuje trzy ostatnie linie kodu. Pierwsza sprawia, że tekst “Nazwa firmy” znika z podstawionego tła. Druga i trzecia eliminują kropkowane obramowanie tła (outline:none;), ciągnące się do końca lewej krawędzi ekranu (overflow:hidden;).