[xhtml+css] Ciąg dalszy kłopotów - div rozjeżdża się..

Witajcie,
Mam problem - http://alfanick.biz. Stronka jest napisana w xHTMLu 1.1 - w FF i Operze div content się rozjeżdża, a tak w ogóle inne nie są na środku, nie wiem co jest źle - w IE działa, nie mam pomysłu jak to naprawić zgodnie ze standardami - wyśrodkować próbowałem w CSSie (text-align: center), ale to nic nie dało. Wiem, że ten div rozjeżdża się, bo w CSSie ustawiłem padding-left, -right - czy można to wykonać inaczej? W poprzednim poście miałem podobne problemy, ale wykorzystywałem tabelkę - uświadomiłem sobie, że tabelki nie służą do designu ;-P, więc przeniosłem stronkę na divy. I jeszcze jeden problem, chodzi o stopkę - wyświetlana się jeszcze tło! Proszę pomóżcie!

Pozdro
alfanick

// Co mi przyszło do głowy, żeby korzystać z xHTMLa 1.1 - jest zbyt Strict :)

XHTML 1.1? A po co to komu? Dla niektórych to nawet 1.0 Strict jest zbyt restryjcyjny ;)
Pod IE 6 wygląda ładnie. Ale.

Wychodzenie tła poza div wychodzi najprawdopodobniej z tego, że niepoprawnie interpretujesz box-model. A raczej IE 6. Dlaczego? Bo zastosowaleś <?xml version="1.0" encoding="iso-8859-2"?> - Internet Explorer wchodzi w Quirks Mode i inaczej (źle, od razu powiem) interpretuje szerokości divów.

To jest w ogóle szeroka kwestia, ale w standardowym box-model chodzi o to, że szerokość (width) to jest jedynie szerokość zawartości. Głupie jak cholera, ale padding, margin i border dodają się do tej wartości. W trybie Quirks Mode w IE (spowodowanym wspomnianym prologiem XML) IE traktuje to jak źle napisaną stronę i stosuje swój box-model. Jak się pozbyć? Usunąć prolog XML najłatwiej. Jest też kilka innych metod, ktoś kiedyś pisał o poleceniach CSS służących do ustawiania tego (dla Gecko i Opery).

Sprawa kolejna - text-align: center; nie powinien służyć do wyśrodkowywania div. Do robienia tego stosuje się margin: auto;. text-align używany jest zwykle dla zapewnienia kompatybilności z IE 5 (see http://grabun.com/teksty/css/centrowanie.html)

Sprawa trzecia. Nie wiem czy tamte rzeczy pomogą, ale rzecz jeszcze jedna. Wyłącz sobie obrazki w przeglądarce i spróbuj nawigować po swojej stronie. Albo użyj Linksa. Co widać? No właśnie, nic. Zadbaj o prawidłowe atrybuty alt dla obrazkow, a nie puste "bo walidator wymaga".

Myślę, że się może przydać:
http://riddle.jogger.pl/2006/05/09/pisanie-stron-pod-internet-explorera
http://riddle.jogger.pl/2006/04/19/wszystko-co-chcesz-wiedziec-o-centrowaniu-w-css/

Dzięki, mam wyśrodkowane - ale dalej problem z rozjeżdżającymi się div'ami i stopką...