[XHTML/CSS] Bład wyświetlania poziomej listy pod IE

[NoAltair]

Witam,

Pracuję nad poziomą listą z wypunktowaniem. W moim projekcie ma to być obrazek. Lista składa się z dwóch elementów: 1. załóż konto, 2. przypomnij hasło. Kod jest poprawnie wyświetlany w FireFoxie, ale nie w IE6. W IE6 po prostu nie ma żadnego wypunktowania ani obrazka. Nie ma problemu jeśli ten sam kod zastosuję z tą różnicą, że to będzie normalna pionowa lista. Nie testowałem kodu w innych przeglądarkach.

CSS:

Kod: Zaznacz cały

div#loginbar {
	height: 23px;
	background: #DADAD1;
	padding: 0 0 0 15px;
	margin: 0;
}

div#loginbar ul {
	float: left;
	text-align: left;
	font: normal 10px/23px verdana;
	list-style: circle url('../i2/w1.gif') inside;
	margin: 0px;
	padding: 0px;
	border: none;
}

div#loginbar ul li {
	float: left; 
	padding: 0 10px 0 0;
	margin: 0;
	border: none;
}

div#loginbar ul li#first {
	font-weight: bold;
}

HTML:

Kod: Zaznacz cały

<div id="loginbar">
<ul>
<li id="first"><a href="">utwórz konto</a></li>
<li><a href="">przypomnij hasło</a></li>
</ul>
</div>

Wiecie jak to rozwiązać?
Z góry dziękuję za każdą pomoc,

Pozdrawiam,

[Asit]

u mnie to dziala na ie6

[NoAltair]

Asit: dzieki za sprawdzenie.

Hmm... sprawdzilem jeszcze raz. nowy dokument html tylko z tym kodem. poprawdy DOCTYPE. w firefox ok, w ie6 - nie. nie ma nawet zwyklego, domyslnego wypunktowania (po usunieciu atrybutu list-style).

Problem zaczyna sie gdy użyję atrybutu float: left;

strone sprawdzal tez kumpel. na jego ie6 tez nie dziala :(

No nic, bede szukal dalej.

[Mateusz Bogolubow]

a mozesz podac link do przykladu...

[Asit]

mi tez jednak nie dziala.. nie wiedzialem dokladnie o co Ci chodzi.. teraz juz wiem ze chodzi o koleczko.. tez go nie mam.. probowalem zrobic margin (myslalem ze ucina) ale tez nic.. jak cos wymysle to napisze..

[Malin]

NoAltair, daj stronkę z przykladem, bo inaczej nie będzie można nic konkretnego stwierdzić.
Jakiego doctype użyłeś? Dałeś przed doctype prolog xml? To wszystko ma wpływ na to, jak strona będzie wyglądać w IE.

[NoAltair]

Testowałem kod również w Operze 7.5. Potem jeszcze doszedł Netscape 8 beta. Netscape zachowuje sie jak FireFox, więc było ok. Opera nie chciała wyświetlać wypunkowania. W końcu doszedłem do takiego kodu:

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>test</title>
<style type="text/css">
<!--
ul li {
   float: left;
   list-style-type: none;
   padding-right: 10px;
}

ul li:before {
	content: url('../i2/w2.gif') "  ";
}
-->
</style>
</head>
<body>
<ul>
<li>jeden</li>
<li>dwa</li>
</ul>
</body>
</html>

Efekt na stronie http://republika.pl/webstandards/lista_pozioma.html

Działa wszędzie tylko nie w IE. Poza tym ma zaletę taką, że można kontrolować odstęp między obrazkiem a tekstem. Przeglądarki bardzo różnie dodają tą odległość. IE nic nie dodaje, a FireFox chyba 10px. przy wykorzystaniu atrybutu content można przesuwać obrazek spacjami.

Po dodaniu atrybutu float: left lub right do reguły ul li wypunktowanie znika w przeglądarkach innych niż FireFox.


Jednym słowem nadal nie znalazłem rozwiązania dla IE.

[Malin]

To oczywiste, że w IE to nie zadziała. IE nie rozumie pseudoklas :before i :after. Możesz to poprawić używając IE7.

[NoAltair]

To oczywiste, że w IE to nie zadziała. IE nie rozumie pseudoklas :before i :after...

Ale przynajmniej zadziałało w Operze. a poprzednia wersja (kod w pierwszym moim poście) działała tylko w FireFox. Zawsze to jakiś postęp.

jesli chodzi o IE7... a co z IE5, 5.5, 6 - przeciez 80% ludzi korzysta z tych przegladarek.

[Asit]

a moze cos takiego:
http://www.alistapart.com/articles/layeredfudge/
oczywiscie troche to poprawic i mysle ze bedzie dzialac..

[NoAltair]

oczywiscie troche to poprawic i mysle ze bedzie dzialac..

czytałem wcześniej ten artykuł. on zupełnie nie rozwiązuje sprawy, ani nie zbliża do rozwiązania. nie w tym rzecz, zeby "wykombinowac" pozioma liste z wypunktowaniem. przeciez mozna wyobrazic sobie taki kod:

CSS:

Kod: Zaznacz cały

#content {
	width: 200px;
}

#lewy {
	float: left;
}

#prawy {
	float: right; 
}

HTML:

Kod: Zaznacz cały

<div id="content">
<div id="lewy">
<ul >
<li>lewy</li>
</ul>
</div>

<div id="prawy">
<ul>
<li>prawy</li>
</ul>
</div>
</div>

ale to nie jest kod strukturalny.

pełne źródło http://republika.pl/webstandards/lista_pozioma2.html

Wszystko wskazuje na to, ze nie ma rozwiazania tego problemu. Jedynie mozna czekac na nowa wersje IE, ktora bedzie obslugiwac style w wiekszym zakresie.