24 grudnia 2008, 15:15:35
Jak zniszczyć komuś życie?
Kilka dni temu przez polską blogosferę przeszła jak burza pewna akcja. Odbiła się echem na Wykopie oraz była powtarzana raz po raz w wielu miejscach. Dorobiła się nawet własnego tagu na Blipie.
Kilka dni temu przez polską blogosferę przeszła jak burza pewna akcja. Odbiła się echem na Wykopie oraz była powtarzana raz po raz w wielu miejscach. Dorobiła się nawet własnego tagu na Blipie.
Serwis informacyjny w całości w technologii Flash? Czemu nie! Polska Agencja Prasowa pokazała, że się da.
Prawidłowa interpretacja tzw. box model często nastręcza wiele problemów. Świadczą o tym pojawiające się na forach i grupach dyskusyjnych pytania, czemu dany element ma inne rozmiary w Firefoksie niż w IE. Mam nadzieję, że poniższa ilustracja rozwieje wszelkie wątpliwości:
Wg specyfikacji CSS 1 własności width i height definiują rozmiary elementu, padding — odległość elementu od otaczającej go ramki (border) a margin — odległość od innych elementów na stronie. Całkowity rozmiar kontenera (lub też pudełka, z ang. box) poznamy, dodając do siebie poszczególne wartości. Jeśli więc mamy np. obrazek o wymiarach 200px×100px i chcemy go otoczyć ramką o grupości 2px, która ma być w odległości 5px od obrazka i 10px od innych elementów to całkowity obszar zajmowany przez ten obrazek będzie wynosił 200+(5+2+10)×2=234px w poziomie i 100+(5+2+10)×2=134px w pionie.
Niestety najpopularniejsza przeglądarka łamie ten schemat stosując własności width i height do obszaru objętego ramką, pomniejszając obszar oznaczony na ilustracji żółtym kolorem o wartości border i padding. Wystarczy jednak na początku dokumentu zamieścić prawidłową deklarację DOCTYPE, żeby przestawić Internet Explorer tzw. tryb standardów (odpowiedni artykuł można znaleźć w bazie MSDN), w którym powyższy „model pudełkowy” zostanie wyświetlony prawidłowo. Oczywiście należy się też postarać, żeby cały dokument był zgodny ze standardem, który został zadeklarowany.
Przykłady prawidłowych deklaracji to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html > body {border:1px solid red;}
Errors and Warnings
* Line 29, character 9:
<span>,,</span>
^
Error: element span not allowed here; possible cause is an inline element containing a block-level element
Hmm.. dziwne
. A konstrukcja była taka:
<blockquote><span>...</span></blockquote>
I teraz pytanie - mój błąd, czy validatora?
yano's jog is proudly powered by Jogger | RSS | Design by Ian Main, ported by Patryk Zawadzki.