[xhtml][css] Bug Firefoxa? Źle floatowane elementy listy

[gamecreator]

Siema.

To jakiś bug Firefoxa? W innych przeglądarkach [nawet IE] wyświetla się poprawnie:

Kod: Zaznacz cały

<ul id="NaviTop">
  <li class="Prev"><a href="#">Poprzedni</a></li>
  <li class="Next"><a href="#">Następny</a></li>
  <li class="Cont"><a href="#">Spis treści</a></li>
</ul>

Kod: Zaznacz cały

#NaviTop {
 list-style:  none;
 margin:      0px;
 padding:     0px;
}

#NaviTop .Prev {
 float:       left;
 margin:      10px;     /* te marginesy uwidaczniają efekt */
}
#NaviTop .Prev a {
 margin:      10px;     /* te marginesy uwidaczniają efekt */
}

#NaviTop .Next { background: #080; }
#NaviTop .Cont { background: #00F; }

Z tego co wiem, według standardu jeśli coś jest floatowane, jest wyjmowane z normalnego biegu dokumentu i elementy które były pod nim wsuwają się na jego miejsce. Jedynie linie w elementach blokowych są skracane, by nie wjeżdżały pod floata, natomiast elementy blokowe powinny być pod floatem.
Jak się odpali ten kod w Firefoxie [mój to 1.5] to wyraźnie widać, że kolejne elementy listy nie wchodzą pod floatowany element, tylko układają się obok niego. Ich tło nie rozciąga się pod floata.
Testowałem to także w Operze 8.5 i Explorerze 5.0 i okazuje się, że nawet dziad IE radzi sobie z tym poprawnie

Jeśli doda się parę DIVów poniżej listy, i wystyluje im jakieś tło, okaże się że "zwykłe" elementy blokowe normalnie chowają się pod ten floatowany element listy gdy znajdą się na jego wysokości [jedynie linie się skracają, by nie wchodzić pod niego].

Tak więc bug? Czy to FF ma rację? [według standardów wynikałoby raczej, że FF się myli] Jeśli bug, to gdzie to się zgłasza?

[Gość]

Wygląda na to, że to bug. Zobacz co się dzieje w przeglądarkach i gdzie są znaki wypunktowania list:

Kod: Zaznacz cały

li,
div.li {
border: 1px solid black;
display: list-item;
}

.NaviTop {
width: 300px;
margin: 0 auto;
padding: 0;
/* list-style-type: none; */
}

.NaviTop .Prev {
float: left;
margin: 10px;
}

.NaviTop .Prev a {
margin: 0 10px;
}

.NaviTop .Next {
background: #def;
}

.NaviTop .Cont {
background: #ffc;
}

Kod: Zaznacz cały

<ul class="NaviTop">
  <li class="Prev"><a href="#">Poprzedni</a></li>
  <li class="Next"><a href="#">Następny</a></li>
  <li class="Cont"><a href="#">Spis tresci</a></li>
</ul>

<div class="NaviTop">
  <div class="li Prev"><a href="#">Poprzedni</a></div>
  <div class="li Next"><a href="#">Następny</a></div>
  <div class="li Cont"><a href="#">Spis tresci</a></div>
</div>

[gamecreator]

Hej, dzięki za ten pomysł z podstawieniem DIVów zamiast UL i LI. Przydał mi się by bronić swoich racji na bugzilli. Wkręcali mi że ich sposób wyświetlania jest poprawny niby z tego względu, że LI tworzy nowy kontekst formatowania ;P [tak, tworzy, ale dla elementów wewnątrz niego]. Ale może w końcu zajrzą do sekcji 9.5 i to naprawią

[gamecreator]

BTW wie ktoś jak wystylować tą listę żeby wyglądała tak samo jak na http://www.wsi.edu.pl/~sistudem/ i w dodatku dobrze w IE/Operze/Firefoxie? Próbuje to zrobić już od czterech dni, sprawdziłem cztery plany awaryjne i dalej jest lipa, najwięcej problemów mam jak zwykle z IE ;P
Konkret to chodzi o to, żeby pierwszy element LI był wyrównany do lewej, drugi do prawej, a trzeci był równo na środku, i każdy z nich miał ikonkę [do tego dwie boczne mają przezroczysty róg].
Najtrudniej mi zrobić ten środek, bo IE nie rozumie paddingów dopóki sie mu nie da "display:block;", a jak się da, to rozszerza box na całą możliwą długość. Nie może tak być, bo mi wtedy ikonka tego środkowego linka ucieka do lewej :/ A bez paddingu to znów wchodzi pod link. Nie mogę też ustawić z góry ustalonej długości dla środkowego linka, bo jak sie zmieni link to mi się centrowanie skopie :/ Ja sie kurde potne przy tym IE :[

[Zajec]

Ale o co chodzi? Ja na tej stronie żadnej listy nie widzę. Przy okazji gdybyś zamienił
<SCRIPT LANGUAGE=JavaScript>
na
<script type="text/javascript">

oraz pozbył się tych dziwnych NBSP, miałbyś validujący się HTML

[gamecreator]

Ale o co chodzi? Ja na tej stronie żadnej listy nie widzę.

Chyba rzeczywiście przesiadywanie przed monitorem szkodzi na wzrok Jeszcze raz to samo, z "podświetlaniem składni" :

jak wystylować tą listę żeby wyglądała tak samo jak na http://www.wsi.edu.pl/~sistudem/

czyli chodzi mi o to, by listę z pierwszego posta w tym wątku wystylować tak, żeby wyglądała tak samo jak na stronie do której link podałem [chodzi mi o to by zrobić z niej coś takiego jak ten niebieski pasek nawigacyjny u góry i u dołu strony].

Przy okazji gdybyś zamienił ... miałbyś validujący się HTML

Ta strona to antyk jestem w trakcie jej przerabiania. Jeszcze niedawno machałem tutaj linkiem do nowej wersji pre-alpha [ http://www.wsi.edu.pl/~sistudem/nowa/01_BudProg.html ]. Chciałem jednak dać też możliwość włączenia starego layoutu by przy okazji pokazać potęgę CSS 8) i właśnie mam problem z tą listą nawigacyjną.

Błąd Firefoxa już obszedłem dając ujemne marginesy dla tych floatowanych elementów listy [w innych przeglądarkach nic to nie zmienia, a w FF przyciąga tło spowrotem do floatów]. Nie mogę sobie jeszcze tylko poradzić z tym środkowym linkiem pod IE. Dlaczego?

Ikonka wchodzi mi pod linka, bo IE olewa ustawianie paddingu dla <a> i nie mogę zrobić miejsca na obrazek tła. Żeby zaczął czaić paddingi, trzeba mu dodać "display:block;", ale wtedy znów rozciąga mi go na całą dostępną szerokość i nici z ikonki koło tekstu Nie mówiąc już o tym, że jak dam height dla <ul>, to mi się pod IE totalnie rozsypuje Jeszcze troche i sie powiesze na kablu od myszki

[Zajec]

A to przepraszam, pierwszego postu nie czytałem, bo nie chciało mi się samemu wklepywać kodu i się w połowie nagle włączyłem

Podpowiedź w ciemno: pamiętaj o ustalaniu zarówno margin jak i padding. Przeglądarki ustawiają sobie różne wartości dla pewnych elemnetów.

[gamecreator]

Ten problem z paddingiem nie dotyczy listy, tylko ogólnie elementów inline, którym chce się przypisać jakiś padding [by zrobić miejsce na obrazek]. W normalnych przeglądarkach jest to możliwe, a IE pozwala na ustawianie paddingu tylko elementom blokowym, przez co nie mogę zrobić miejsca w <a> [znajdującego się na liście] dla ikonki. Żeby padding zadziałał, muszę więc dodać "display:block" bo tylko wtedy IE uznaje paddingi. Wtedy jednak ten link rozszerza mi się na całą dostępną szerokość i jest lipa
Natomiast mam nadzieję, że ktoś tutaj wie jak to obejść może, np. nie w sposób w który ja próbuję, tylko jakoś inaczej tą listę wystylować by uzyskać ten sam efekt.

[Zajec]

Z doświadczenia wiem dobrze, że ludzie są leniwi i jak mają już pomagać wolą mieć jasno podany dziwnie funkcjonujący kod i zmieniać go sobie tylko zamiast samemu wklepywać do dokumentu HTML.

To tak na wypadek, gdyby nie znalazł się ktoś wystarczająco pracowity

[gamecreator]

Sie wie, sie robi Służę kodem
http://www.wsi.edu.pl/~sistudem/css/navi/Navi01.html
http://www.wsi.edu.pl/~sistudem/css/navi/Navi02.html

A tu mała ilustracja ;J
http://www.wsi.edu.pl/~sistudem/css/Image2.jpg

Pierwszy link to próba, w której Firefox mi pokazał tyłek, gdy chciałem zrobić według rysunku 1. Ale go oblazłem ujemnymi marginami ;P i dając tło dla linków [według rysunku 2]. Wiązało się to jednak z kompromisem w postaci nieklikowalnych ikonek ;P No i oczywiście w IE został problem środkowego linka.
Drugi link to próba trzecia już, w której ujemne marginesy zastosowałem nieco inaczej, odzyskując klikowalność ikonek i współpracę Firefoxa Tu też zostaje ten problem środkowego linka w IE. Dodatkowo doszedł drugi, gdy chciałem ustawić wysokość listy na 19px [wysokość obrazków paska nawigacyjnego] - wszystko sie rozkraczyło