960Pixels netpress wordpress, tutoriale, grid960, photoshop itd…

O czym właściwie jest ten post? Różnice w wyświetlaniu tła strony. 1px background bug bo o nim mowa pojawił się u mnie pomiędzy przeglądarkami, które są zestandaryzowane i nigdy nie było z nimi większych problemów (Firefox, Opera, Chrome). Ów problem pojawia się w momencie, gdy próbujemy jakiś element (img, div z tłem) zestawić obok tła strony (background dla body) w jedną całość. Jeśli obrazek jest podzielny przez 2 i nadamy mu center sprawa wydaje się prosta – jest na środku – niestety, tylko wydaje się. Problem pojawia się w momencie, gdy na stronie zaczyna pojawiać się scrollbar – różne przeglądarki mają to różnie rozwiązane. Jeśli któryś z owych scrollbarów pionowych (oś Y) ma nieparzystą ilość pikseli w swojej szerokości, wówczas centrowanie obrazka do środka bierze najzwyczajniej w łeb (będzie przestawiony właśnie o ten jeden nieszczęsny piksel, burząc nasz misterny plan „wielkiego tła”.

By to naprawić wystarczy, że dodamy do naszego arkusza styli następującą regułę:

html {
	margin-left: -1px;
	overflow-Y: scroll;
}

Dzięki temu, przesuniemy całość o 1px dodając przy tym scrollbar w momencie, gdy będzie on potrzebny. Dawniej hack ten nie działał w operze – sprawiał jej wielkie trudności. Jednakże wraz z nowszymi wersjami wydaje się, że Opera wyeliminowała ten bug i teraz do szczęścia wystarczy nam dodać tylko powyższy fragment kodu do naszego CSS’a.

Bardzo dawno nie pisałem, za co z góry przepraszam ;) Niestety ale ostatnio cierpię na chroniczny brak czasu. W kwestii tego posta to raczej na tyle, niedługo postaram się nieco nadgonić dodawanie postów bo niestety ostatni miesiąc trochę przespałem pod tą kwestią. jakby coś – blog nie umarł – miał po prostu lekki czas stagnacji ;) Zdarza się.