Dlaczego FF łamie NBSP?

[ptecza]

Witam,

mam zagnieżdzoną tabelkę dynamicznie generowaną przez aplikację
CGI (SqWebmail). W tabelce jest komórka z obrazkiem (ikonka folderu),
radiobuttonem (do wybierania folderu), linkiem (wejście do folderu)
i tekstem (ile nieprzeczytanych wiadomości). Wszystkie te elementy są
oddzielone od siebie NBSP jak widać poniżej:

<td align="left" valign="top"><img src="[...]" width="30" height="22" alt="Folder" title="Folder" />&nbsp;<input type="radio" name="DELETE" value="INBOX" />&nbsp;<a class="folderlink" href="[...]">OTRZYMANE</a>&nbsp;<font class="folderlistunread" style="color: #800000" size="-1">(nieprzeczytanych:&nbsp;1)</font></td>

Ponieważ szerokość wszystkich elementów nie mieści się w komórce
(obok i wokół są inne tabelki), to FF łamie linię po radiobuttonie dla
folderu OTRZYMANE. Czy nie powinien jednak "rozepchnąć" tej
komórki tak, żeby wszystkie elementy zmieściły się w jednej linii?
Tak właśnie robi Opera i MS IE, a ja chciałbym, żeby FF też tak robił

Poniżej zamieszczam linki do obrazków z widokiem strony w różnych
przeglądarkach oraz źródła strony i szablonu CSS:

Widok strony w FF 1.5.0.9
Widok strony w Operze 9.10
Widok strony w MS IE 7.0
Kod HTML strony
Szablon CSS

Czy to błąd FF? Jeśli nie, to w jaki sposób mogę usunąć problem?

Pozdrawiam,

P.

[ptak82]

Na pewno nie jest to błąd Firefoksa. Jeśli użyłbyś jednakowych jednostek do definiowania odległości poszczególnych elementów tabeli, myślę, że wszystko było by ok. Zdecyduj się na px, albo na %.

Poza tym ilość zagnieżdżeń tabel w tabeli jest dość olbrzymia.

[ptecza]

Na pewno nie jest to błąd Firefoksa. Jeśli użyłbyś jednakowych jednostek do definiowania odległości poszczególnych elementów tabeli, myślę, że wszystko było by ok. Zdecyduj się na px, albo na %.

Poza tym ilość zagnieżdżeń tabel w tabeli jest dość olbrzymia.

Dzięki za odpowiedź! Tabel jest rzeczywiście sporo, ale jak widać na
dołączonych obrazkach konkurenci FF radzą sobie z nimi świetnie.
Nie przeszkadza im również to, że używam zarówno px jak i %.

Niektóre tabele mógłbym rzeczywiście zastąpić DIVami w statycznym
szablonie, z którego korzysta Sqwebmail. Nie mam jednak większego
wpływu na dynamiczny kod generwowany przez aplikację, który jest
"wklejany" do szablonu. Niestety zawiera on sporo zagnieżdżonych tabel,
bo Sqwebmail był pisany w czasach, gdy do pozycjonowania elementów
na stronie używało się tabel. Zmiana tego na DIV+CSS jest potrzebna,
ale będzie bardzo czasochłonna.

Nie chciałbym zgłaszać tego problemu jako błędu FF, bo wciąż nie mam
pewności czy to rzeczywiście jest błąd przeglądarki. Nie rozumiem tylko
dlaczego FF łamie elementy, skoro łączę je niełamliwą spacją? Jeśli główna
tabela (klasa main-box) jest szersza niż teraz, np. ma 800px zamiast
720px, to FF już nie łamie elementów.

[ptak82]

Dzięki za odpowiedź! Tabel jest rzeczywiście sporo, ale jak widać na
dołączonych obrazkach konkurenci FF

Fx -> nie FF

Nie chciałbym zgłaszać tego problemu jako błędu FF, bo wciąż nie mam
pewności czy to rzeczywiście jest błąd przeglądarki. Nie rozumiem tylko
dlaczego FF łamie elementy, skoro łączę je niełamliwą spacją? Jeśli główna
tabela (klasa main-box) jest szersza niż teraz, np. ma 800px zamiast
720px, to FF już nie łamie elementów.

Ale sam sobie odpowiadasz w swoim pytaniu. Jeśli masz tabele 720 px a wnętrze jest szersze to przełamie Ci się bo się nie ma gdzie zmieścić. Przy szerszej tabeli nie przełamie bo się mieści.

[carlos]

Dokładnie, w FF nie napis się nie mieści. Mógłbyś na przykład zmniejszyć czcionkę na 10px:


Czemu Opera i IE tak nie mają? Jeśli zmierzysz szerokość tabeli w Firefoksie ma ona dokładnie 720px - tyle, ile zadeklarowana.
W IE i Operze jest szersza. Trzeba by poczekać na komentarz speca od CSS ale wydaje mi się, że zachowanie Firefoksa jest poprawne, a przynajmniej ja bym takiego oczekiwał.

Przy okazji, Konqueror wyświetla tak jak Firefox (tabela 720px, napis poniżej).

Pozdrawiam.

[ptecza]

Dzięki za odpowiedź! Tabel jest rzeczywiście sporo, ale jak widać na
dołączonych obrazkach konkurenci FF

Fx -> nie FF

Hm. Czyba obie wersje są niepoprawne i prawidłowo powinno być
po prostu F?

Nie chciałbym zgłaszać tego problemu jako błędu FF, bo wciąż nie mam
pewności czy to rzeczywiście jest błąd przeglądarki. Nie rozumiem tylko
dlaczego FF łamie elementy, skoro łączę je niełamliwą spacją? Jeśli główna
tabela (klasa main-box) jest szersza niż teraz, np. ma 800px zamiast
720px, to FF już nie łamie elementów.

Ale sam sobie odpowiadasz w swoim pytaniu. Jeśli masz tabele 720 px a wnętrze jest szersze to przełamie Ci się bo się nie ma gdzie zmieścić. Przy szerszej tabeli nie przełamie bo się mieści.

Sytuacja jest rzeczywiście dwuznaczna, bo z jednej strony ustalam jakąś
stałą szerokość elementu zewnętrznego, a z drugiej mówię, że nie chcę
łamać elementów wewnętrznych nawet wtedy, gdy są szersze niż element
zewnętrzny. Wydawało mi się jednak, że przeglądarki dosyć liberalnie
podchodzą do takich sytuacji.

Ja, jako projektant strony chciałbym, żeby zewnętrzny element miał
zadaną stałą szerokość wtedy, gdy jego elementy wewnętrzne nie są
szersze oraz żeby został on "rozciągnięty", gdy elementy w środku się
nie mieszczą. Nie zawsze przecież wiemy jaka będzie szerokość
wewnętrznych elementów.

[ptak82]

Masz problemy z dziedziczeniem w CSSie:

Jak zrobiłem:

Kod: Zaznacz cały

a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 90%;
   text-decoration: none;
}

pomogło. Tak samo możesz jak napisano powyżej zmniejszyć czcionkę w body, ale wtedy odniesie się to do całego dokumentu. A tu tylko do odnośników.

[ptecza]

Dokładnie, w FF nie napis się nie mieści. Mógłbyś na przykład zmniejszyć czcionkę na 10px:

Dzięki za radę! Obawiam się jednak, że nasz Helpdesk i grono
użytkowników ze słabszym wzrokiem nie wybaczyłoby mi tego

Może po prostu zwiększyć szerokość strony, np. do 800px? Tylko, że nie
wiem, ilu użytkowników wciąż używa rozdzielczości 800x600, a ta zmiana
spowodowałaby, że będą musieli intensywnie używać poziomego paska
do przewijania...

Przy okazji, Konqueror wyświetla tak jak Firefox (tabela 720px, napis poniżej).

Ups! Kolejna przeglądarka, która wyświetla nie tak, jak chcę

Pozdrawiam,

P.

[carlos]

Dokładnie, w FF nie napis się nie mieści. Mógłbyś na przykład zmniejszyć czcionkę na 10px:

Dzięki za radę! Obawiam się jednak, że nasz Helpdesk i grono
użytkowników ze słabszym wzrokiem nie wybaczyłoby mi tego

Odpada więc

Może po prostu zwiększyć szerokość strony, np. do 800px? Tylko, że nie
wiem, ilu użytkowników wciąż używa rozdzielczości 800x600, a ta zmiana
spowodowałaby, że będą musieli intensywnie używać poziomego paska
do przewijania...

To może zastąpić "(nieprzeczytanych: 1)" na "(1)" jak w programach pocztowych? Wydaje mi się, że będzie wiadomo o co chodzi.

Pozdrawiam.

[ptecza]

Masz problemy z dziedziczeniem w CSSie:

Hm. Zmniejszenie rozmiaru czcionki dla linków rozwiąże problem
z dziedziczeniem?

Jak zrobiłem:

Kod: Zaznacz cały

a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 90%;
   text-decoration: none;
}

pomogło.

A u mnie nie

Poza tym to rozwiązanie raczej nie wchodzi w grę, ponieważ:

1. Chciałbym zachować rozmiar czcionek, które są dosyć duże i czytelne
nawet dla starszych osób,
2. Jeśli liczba nieprzeczytanych wiadomości w folderze będzie duża,
np. 100, to nawet mniejsza czcionka dla linków nie zapobiegnie złamaniu linii.

Wychodzi więc na to, że jest tylko jedno akceptowalne rozwiązanie
problemu -- zwiększenie szerokości strony. Można by jeszcze umieszczać
elementy w osobnych komórkach tabeli, ale to wymaga przerabiania
Sqwebmaila, więc odpada.

[ptecza]

Może po prostu zwiększyć szerokość strony, np. do 800px? Tylko, że nie
wiem, ilu użytkowników wciąż używa rozdzielczości 800x600, a ta zmiana
spowodowałaby, że będą musieli intensywnie używać poziomego paska
do przewijania...

To może zastąpić "(nieprzeczytanych: 1)" na "(1)" jak w programach pocztowych? Wydaje mi się, że będzie wiadomo o co chodzi.

Pozdrawiam.

Dzięki za pomysł! Muszę się nad nim zastanowić. Problem polega też na
tym, że wszelkie zmiany interfejsu, do którego przyzwyczaili się już
użytkownicy grożą rozpętaniem IV wojny światowej

[ptak82]

No to jeśli możesz to zmień rozmiar strony. Ja robię 770px, jest to bezpieczna szerokość dla rozdzielczości 800x600.

[ptecza]

No to jeśli możesz to zmień rozmiar strony. Ja robię 770px, jest to bezpieczna szerokość dla rozdzielczości 800x600.

Robiłem testy i dopiero przy 800px Firefox nie złamał mi linii, gdy w folderze
OTRZYMANE była jednocyfrowa liczba nieprzeczytanych wiadomości.

[ptak82]

No to jeśli możesz to zmień rozmiar strony. Ja robię 770px, jest to bezpieczna szerokość dla rozdzielczości 800x600.

Robiłem testy i dopiero przy 800px Firefox nie złamał mi linii, gdy w folderze
OTRZYMANE była jednocyfrowa liczba nieprzeczytanych wiadomości.

Ok, ale jeśli dasz 800px i będziesz miał rozdzielczość 800x600 to Ci się pojawią paski przewijania. A to niezbyt ładnie wygląda, jak całość nie mieści Ci się na ekranie.

[ptecza]

No to jeśli możesz to zmień rozmiar strony. Ja robię 770px, jest to bezpieczna szerokość dla rozdzielczości 800x600.

Robiłem testy i dopiero przy 800px Firefox nie złamał mi linii, gdy w folderze
OTRZYMANE była jednocyfrowa liczba nieprzeczytanych wiadomości.

Ok, ale jeśli dasz 800px i będziesz miał rozdzielczość 800x600 to Ci się pojawią paski przewijania. A to niezbyt ładnie wygląda, jak całość nie mieści Ci się na ekranie.

Tak, wiem o tym. Ale nawet gdybym dał 770px, to przy długiej stronie,
która nie mieści się w całości w pionie pojawi się pasek pionowy.
Wtedy strona może się już nie zmieścić w całości w poziomie i pojawi się
pasek poziomy...

Niestety nie wiem jakich rozdzielczości używają użytkownicy. Nie zdziwiłbym się
jednak, gdyby byli wśród nich tacy, którzy mają 800x600. Tak samo nie
dziwi mnie już, że niektórzy nasi użytkownicy wciąż używają Windowsa 98,
bo... im działa

BTW, jest jakiś sposób sprawdzenia rozdzielczości użytkowników? Oczywiście bez
robienia ankietki

[ptak82]

To chyba najlepsze źródło na określenie, kto co używa: http://www.ranking.pl/Newsletter/pl/2007-02-01/#_link3

Co do szerokości to właśnie dlatego 770px, aby uwzględniło pasek pionowy, przy takiej szerokości na pewno nie pojawi się poziomy.

[ptecza]

To chyba najlepsze źródło na określenie, kto co używa: http://www.ranking.pl/Newsletter/pl/2007-02-01/#_link3

Dziękuję za link! Czyli użytkownicy z rozdzielczością 800x600 naprawdę
istnieją i nie jest ich wcale tak mało