blog.kompromis.net

Okresowo sprawdzam stronę na http://validator.w3.org/, dzisiaj okazało się, że mam 22 błędy, zabrałem się za szukanie przyczyn błędów.
Okazało się, że popełniłem w sumie tylko dwa błędy.

Wyrównanie obrazka

Dwa błędy, poniżej, dotyczą jednego miejsca w kodzie, wstawionego obrazka, wyrównania go do lewej i ustawienia odstępu od tekstu.

Line 57, Column 158: Attribute "align" exists, but can not be used for this element.

…="obraz.jpg" align="left" hspace="5px" />Jak co roku <a href

Line 57, Column 172: Attribute "hspace" exists, but can not be used for this element.

…obraz.jpg" align="left" hspace="5px" />Jak co roku <a href="http://www.c

Tak wygląda niewłaściwy kod:

<img src="obraz.jpg" width="100" height="118" alt="obraz.jpg" align="left" hspace="5px"/>

Muszę pozbyć się tagów hspace oraz align, można to zrobić na kilka sposobów, ale ponieważ korzystam z Drupala postanowiłem do zbioru style.css dodać następujące linie, co wydaje mi się najprostszym rozwiązaniem:

.node img {
        float:left;
        margin:0 8px 2px 0;
}

Dzięki temu wszystkie dodawane obrazy są wyrównane do lewej, oblane tekstem z prawej strony wraz z odpowiednim odstępem.

Zmniejszony tekst

Problemem okazały się też linie ze zmniejszonym tekstem, a dokładniej użyciem tagu >small< dookoła tagu <ul>.

Line 54, Column 46: document type does not allow element "ul" here; missing one of "object", "ins", "del", "map", "button" start-tag

…Kategoried: <ul class="links inline"><li class="taxonomy_term_83 first"><a hr

Znalazłem wadliwy kod w zbiorze node.tpl.php:

<small><?php if ($terms) { ?<Kategorie: <?php print $terms?> <?php }; ?></small>

zamieniłem tag <small> na <div class="small">, a cała linia wygląda teraz tak:

<div class="small"><?php if ($terms) { ?<Kategorie: <?php print $terms?> <?php }; ?></div>

Do zbioru style.css dodałem jeszcze definicję stylu .small:

.small {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 0.9em;
        }

Uruchomienie Walidatora i znowu miły oku komunikat: This document was successfully checked as XHTML 1.0 Strict!.