[S.....r]

#css #webdev

Czesć, mam zagadkę - dla mnie. I przyznam, że zgłupiałem.

Jest sobie kod css pozycjonujący element:

 left: 197px;
 bottom: 441px;
 position: relative;

I na najnowszym Chromie na kompie A działa idelanie. Ale na takm samym chromie ale komputerze B już wyświetla się w cały świat. Żeby na B był wyświetlany w poprawnie (w takim samym miejscu) kod musi wyglądać tak:

 left: 12px;
 bottom: -93px;
 position: relative;

Ale wtedy z wiadomych względów wyświetlanie pieprzy się na kompie A. Ogólnie rozmawiałem z kilkoma osobami siedzącymi we frontendzie od dawna i ich opinia była dość enigmatyczna i można ją streścić słowami: "to nie ma prawa się tak dziać, pomiędzy różnymi przeglądarkami ok ale na tej samej nie.". Przy czym nikt się wcześniej z czymś takim nie spotkał. Ale może wy macie jakieś doświadczenie?

[defoxe]

@Seeker: pokaż stronę.
Głupio zapytam, rozdzielczości takie same ekranów?

[s.....3]

Przy czym nikt się wcześniej z czymś takim nie spotkał.

@Seeker: To niezłe osoby siędzące we frontendzie XXDDD
Bez żywego przykładu to jak wróżenie ze szklanej kuli.

[josh]

@Seeker: rzuć kodem.

[Koziolek_Matolek]

@Seeker: ja tu widzę podstawowe błedy, choć nie widzę też całego kodu mianowicie:

left i bottom bedzie dzialac tylko dla position: absolute; a te divy powinny być w divie position:relative; ten kontener relatywny musi mieć określoną szerokość np: width 100%

[laki1]

left i bottom bedzie dzialac tylko dla position: absolute;

@Koziolek_Matolek: nope :P

Ogólnie potrzeba więcej kodu, ale jak ktoś musi przestawiać elementy o 441px to na pewno jest tam jakiś #!$%@?

[Koziolek_Matolek]

@laki1: będzie poprawnie działać tylko dla position absolute, dla relative pozornie dziala dobrze, w niektorych przypadkach jak tu dziala różnie w zależności od przegladarki, wersji itp

[mosqua]

@Seeker: czy występują różnice pomiędzy kompami: MacOS vs Windows lub wsparcie renderowania GFX aktywne vs nieaktywne?!

[mosqua]

position: relative

@mosqua: btw. relative jest dla uchwytu jako parent = i w nim robisz childa z aboslute i top bottom...

[mosqua]

left i bottom bedzie dzialac tylko dla position: absolute;

@Koziolek_Matolek: @Seeker Właśnie!

i podejrzewam że masz tam jakiś bajzel w kodzie, skoro to jakoś działa i nie działa...

[MQs]

@Seeker: Różnice mogą wynikać z jakiegoś wstrzyknięcia. Powyłączaj dodatki w przeglądarce.

[S.....r]

@mosqua: MacOS wygląda ok. Na 90% kompów z Windowsem też. Problem robi tylko kilka komputerów testowych z Chromem. Nic, zaoram to bo to scheda po "poprzedniku"

[mosqua]

@Seeker: no to pewnie gdzieś jest nadpisany css !important; przeszukaj, lub duplikat klasy w jednym jest relative w drugiej absolute, lub obiekt jest generowany dynamicznie z parametrem absolute do dragdropa albo innego gówna...

[mosqua]

@Seeker: zresztą w debugerze CSS będziesz widział wszystkie instancje!

[josh]

@Seeker: Różnica w interpretacji line-height dla elementu .level-3. Nie wiedzieć czemu nowy chrome, o którym mówisz, być może, zaokrągla te dziwne 20.8px do 21px i to powoduje właśnie taki efekt który przedstawiasz. Pytanie tylko brzmi: skąd ta różnica w interpretacji.

[S.....r]

@josh: Własnie to mnie ciekawi. Czemu ta sama przeglądarka różnie interpretuje tego samego CSSa. No ale nic, będzie trzeba ten kod wywalić i wrzucić tam coś napisanego "po ludzku"

[josh]

A zmień w template.css w regule zaczynającej się w linii 1316 line-height z 20.8px na 20px i zobacz czy zadziała :)

[S.....r]

@josh: Magia. Działa. Pytanie czemu jest aż taka różnica w interpretacji tej linii?

[josh]

@Seeker: Szkoda czasu na takie dywagacje :). Lepiej ten czas poświęcić na zapoznanie się z tematem unitless line-height, żeby w przyszłości nie borykać się z takimi przypadłościami.