Zagadka CSS #3
Zagadka podobna do pierwszej, ale… No właśnie, jest jedno ale.
Zasady zagadek CSS
- Kod zawiera błąd
- Kod zawiera dokładnie jeden błąd
- Nie chodzi o ewentualną różnicę w interpretacji różnych przeglądarek jak Opera czy Firefox ani nawet programu Internet Explorer
- Odpowiedzi piszemy w komentarzach do postu zagadki. Kto pierwszy ten lepszy.
- Są to style do XHTML-a
Zagadka nr 3:
div img {
width: 100px
}
a.strong {
position: absolute;
color: #333;
height: 1em;
padding: 2px .35em 0;
border-bottom: 1px solid #666
}
h1 span {
text-indent: -9999px
}
Gdzie jest błąd?
Odpowiedź na zagadkę nr 3:
dodano 20.12.2006
Odpowiedź na tą zagadkę z lekkim poślizgiem, od czasu kiedy mieszkam w Warszawie mam wrażenie, że tu doba ma mniejszą ilość godzin :-).
Błąd w kodzie polegał na zastosowaniu własności text-indent do elementu liniowego.
h1 span {
text-indent: -9999px
}
Poprawny kod:
h1 span {
display:block;
text-indent: -9999px
}
Błąd analogiczny jak w zagadce nr 1.
Jako pierwszy poprawnej odpowiedzi udzielił Xarafaxz.
Tuesday, 21 November 2006, 10:49 pm by chmurli
height: 1em;
Tuesday, 21 November 2006, 11:08 pm by Xarafaxz
Text-indent nie zadziała w elementach “inline” jakim jest span.
Wednesday, 22 November 2006, 1:22 am by MalCom
Tak, jak kolega wyzej napisal, brakuje kilku ‘;’ na koncu wiersza :P
Wednesday, 22 November 2006, 8:44 am by quiris
Akurat średniki po *ostatniej* deklaracji właściwości nie są wymagane :P
Wednesday, 22 November 2006, 9:14 am by Kuba
Jest to kwestia “text-indent” dla elementu liniowego “span”, nie zadziała.
Wednesday, 22 November 2006, 4:17 pm by Gurthg
Może warto wyłączyć pokazywanie komentarzy w zagadkach?
Ja obstawiam inny błąd. Posłałem na priv.
Wednesday, 22 November 2006, 10:00 pm by psz
text-indent działa tylko na elementach blokowych, komórkach tabeli oraz inline-block.
Wednesday, 22 November 2006, 10:01 pm by krst
text-indent jest dla elementów blokowych, czyli dla h1, nie dla span’a.
Thursday, 23 November 2006, 12:35 pm by Robert Drózd
“position: absolute;”
nie jest to wymagane explicite, ale jeśli pozycjonujemy absolutnie, powinniśmy określić tę pozycję za pomocą właściwości top, left itd.
Tuesday, 5 December 2006, 9:18 pm by Wielkie G
niby text-ident na pierwszy rzut oka nie powinien być ujemny, lecz to może być pułapka… ale nie mam żadnego innego pomysłu, więc obstawiam ten błąd.
Wednesday, 13 December 2006, 3:37 pm by snapshot
padding: 2px .35em 0;
Mi nie pasuje tu kropka i to, że są podane 3 wartości. Z tego co pamiętam można podać 1,2 lub 4.
Wednesday, 20 December 2006, 2:53 am by Wojciech Bednarski
Robert Drózd
Zaskoczyłeś mnie po raz kolejny. Konkretnie tym, że błąd był w użyciu text-indent tak często stosowanego by poprawić dostępność stron internetowych, których to audyt podobno wykonujesz. żałosne :]
Wednesday, 20 December 2006, 1:26 pm by Robert Drózd
Możesz wyjaśnić jeszcze raz, czym Cię zaskoczyłem?
Szczerze powiedziawszy mało mnie obchodzi czy text-indent dla elementu liniowego jest zgodne ze specyfikacją czy nie - ale to *jak reagują na to przeglądarki*.
Btw. ja stosuję:
position:absolute;
left:0px;
top:-500px;
Friday, 22 December 2006, 12:50 am by Wojciech Bednarski
Robert Drózd
Wszystkie liczące się silniki, czyli: Gecko, Presto, KHTML i WebCore a nawet program Internet Explorer reagują tak samo. Zgodnie ze specyfikacją.
No ależ to się wywali przy każdym elemencie, który będzie się zawierał w elemencie różnym od static o wysokości większej niż 500px. Może też powodować problemy u użytkowników posiadających karty nVidia i sterownik nv, pomimo że to mały odsetek internautów.
Lepszym rozwiązaniem wyda je się być coś w stylu:
left:-9999px czy też -900em
Friday, 22 December 2006, 4:29 pm by Robert Drózd
masz jakieś źródło na temat zachowania tego sterownika nv w zależności od takiego css?
Saturday, 20 January 2007, 9:59 pm by Grzegorz
kod nie zawiera błędu
Friday, 23 February 2007, 7:01 pm by Karolina
A co ze strong… Moze byc jako klasa? Chyba nie bardzo.