[HTML][CSS] Menu się rozjeżdza... Opcje

[ArekJ]

Witam. Mam problem z kodem, ale nie wiem czy CSS czy HTML. Rozjeżdza mi się w dół pod FireFoxem. Nie znam dokładnych wersji, ale na FF3 wszystko jest ok.
W HTML mam:

[HTML] pobierz, plaintext 
<li class="limenu" style="width: 101px; height: 38px;"><span style="width: 101px; background: url(images/menu_left.jpg); height: 38px;"></span></li><li class="limenu" style="width: 173px; height: 38px;"><span><a href="index.php" class="aglowna"></a></span></li><li class="limenu" style="width: 20px; height: 38px;"><span style="width: 20px; background: url(images/separator1.jpg); height: 38px;"></span></li><li class="limenu" style="width: 73px; height: 38px;"><span><a href="http://forum.xxxxxxxx.pl/" class="aforum"></a></span></li><li class="limenu" style="width: 21px; height: 38px;"><span style="width: 21px; background: url(images/separator2.jpg); height: 38px;"></span></li><li class="limenu" style="width: 119px; height: 38px;"><span><a href="index.php?act=rejestracja" class="arejestracja"></a></span></li><li class="limenu" style="width: 21px; height: 38px;"><span style="width: 21px; background: url(images/separator3.jpg); height: 38px;"></span></li><li class="limenu" style="width: 98px; height: 38px;"><span><a href="index.php?act=kontakt" class="akontakt"></a></span></li><li class="limenu" style="width: 109px; height: 38px;"><span style="width: 109px; background: url(images/menu_right.jpg); height: 38px;"></span></li>
[HTML] pobierz, plaintext 

A w CSS

[HTML] pobierz, plaintext 
#menuwrapper {
padding : 0;
margin : 0 auto;
border : 0;
width : 735px;
height : 38px;
}
#menu {
padding : 0;
margin : 0 auto;
border : 0;
display : block;
width : 735px;
height : 38px;
list-style : none;
}
ul {
padding : 0;
margin : 0;
border : 0;
list-style : none;
display : inline;
}
ul li {
padding : 0;
margin : 0;
border : 0;
height : 38px;
list-style : none;
display : inline;
}
.limenu {
padding : 0;
margin : 0;
border : 0;
list-style : none;
display : inline;
white-space : nowrap;
}
.limenu span {
padding : 0;
margin : 0;
border : 0;
width : auto;
display : inline-block;
}
.aglowna {
padding : 0;
margin : 0;
border : 0;
height : 38px;
display : block;
width : 173px;
background : url(images/glowna.jpg) no-repeat 0 0;
}
.aglowna:hover {
background-position : 0 -38px;
}
.aforum {
padding : 0;
margin : 0;
border : 0;
height : 38px;
display : block;
width : 73px;
background : url(images/forum.jpg) no-repeat 0 0;
}
.aforum:hover {
background-position : 0 -38px;
}
.arejestracja {
padding : 0;
margin : 0;
border : 0;
height : 38px;
display : block;
width : 119px;
background : url(images/rejestracja.jpg) no-repeat 0 0;
}
.arejestracja:hover {
background-position : 0 -38px;
}
.akontakt {
padding : 0;
margin : 0;
border : 0;
height : 38px;
display : block;
width : 98px;
background : url(images/kontakt.jpg) no-repeat 0 0;
}
.akontakt:hover {
background-position : 0 -38px;
}
[HTML] pobierz, plaintext 

Nie mam pojęcia jak to naprawić. Proszę o sugestie...

Ten post edytował ArekJ 15.12.2008, 22:03:34

[timon27]

Nic dziwnego, że nikit Ci nie odpowiada - mi się po prostu nie chce przez to przechodzić. Jeśli chcesz aby łatwo się to sprawdzało to:
-umieszczaj cały css w style, a nie pół w <style>, drugie pół w style=""
-przełamuj linijki przy nowych tagach
-użyj wcięć
Być może kiedy "upięknisz" kod sam zobaczysz błąd

Na pierwszy rzut oka mogę powiedzieć: istnieją podwójne deklaracje, istnieją zbędne deklaracje (np ul li, a nie korzystarz z ul). To chyba tylko część kodu bo nie widze menu oraz menuwrapper

Ten post edytował timon27 15.12.2008, 23:31:00

[Gryf]

swoją drogą możesz to na jakiś serwer dać?
łatwiej mi wtedy ocenić potencjalny błąd jak mam grafikę ;]

[ArekJ]

http://beta.swiat-magii.pl/
Proszę tutaj jest wersja na serwerze Czekam na jakieś podpowiedzi.
A c wcięciami to będzie mniej więcej tak:

[HTML] pobierz, plaintext 
<li class="limenu" style="width: 101px; height: 38px;">
	<span style="width: 101px; background: url(images/menu_left.jpg); height: 38px;"></span>
</li>
<li class="limenu" style="width: 173px; height: 38px;">
	<span><a href="index.php" class="aglowna"></a></span>
</li>
<li class="limenu" style="width: 20px; height: 38px;">
	<span style="width: 20px; background: url(images/separator1.jpg); height: 38px;"></span>
</li>
<li class="limenu" style="width: 73px; height: 38px;">
	<span><a href="http://forum.xxxxxxxx.pl/" class="aforum"></a></span>
</li>
<li class="limenu" style="width: 21px; height: 38px;">
	<span style="width: 21px; background: url(images/separator2.jpg); height: 38px;"></span>
</li>
<li class="limenu" style="width: 119px; height: 38px;">
	<span><a href="index.php?act=rejestracja" class="arejestracja"></a></span>
</li>
<li class="limenu" style="width: 21px; height: 38px;">
	<span style="width: 21px; background: url(images/separator3.jpg); height: 38px;"></span>
</li>
<li class="limenu" style="width: 98px; height: 38px;">
	<span><a href="index.php?act=kontakt" class="akontakt"></a></span>
</li>
<li class="limenu" style="width: 109px; height: 38px;">
	<span style="width: 109px; background: url(images/menu_right.jpg); height: 38px;"></span>
</li>
[HTML] pobierz, plaintext 

[JoShiMa]

Człowieku. Po co Ci ten <span> wewnątrz <li> ? PRzecież wystarczy to <li> albo <a> po ludzku ostylować.

A gdzie tu: http://beta.swiat-magii.pl/ jest to menu bo jakoś nie widzę.

Ten post edytował JoShiMa 16.12.2008, 15:30:37

[ArekJ]

Jest pod logiem... Potem ten span usunę, ale jak to naprawić?

[JoShiMa]

Ja tam w FF widzę tylko "Strona główna".

Namotałeś tak w stylach, że głowa mała.

Po co wszędzie

[HTML] pobierz, plaintext 
padding : 0;
margin : 0;
border : 0;
[HTML] pobierz, plaintext 

Raz na początku daj:

[HTML] pobierz, plaintext 
*{
padding : 0;
margin : 0;
border : 0;
}
[HTML] pobierz, plaintext 

a inne wartości ustawiaj tylko tam gdzie potrzeba.

Masz osobno style dla ul li osobno dla .limenu. Wcale bym się nie zdziwiła jak by się gryzły z tym style dla <span> masz tam bałagan totalny.

Zacznij te style pisać od początku i jakoś porządniej.
Masz tu na początek skrypt z samym menu w linii:
http://blog.bexlab.pl/tutorials/inline.html

I zobacz jak to można zrobić w kilku linijkach (style)

Ten post edytował JoShiMa 16.12.2008, 16:20:05

[Gryf]

po ciężkim dniu w prac 2 minuty i ff dobrze to widzi ale popraw całość ;]

Kod

.limenu {
border:0 none;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
white-space:nowrap;
}

Ten post edytował Gryf 16.12.2008, 17:09:58

[ArekJ]

Widziac dobrze, bo z kolega kombinowalem i juz sie w linii ukladdalo, tylko odstepy byly. Dzieki bardzo-mam nadzieje, ze dziala pod FF2, ale nie mam jak tego przetestowac dopiero jutro...

Eh... To znowu ja z tym problemem. Przetestowałem to pod FF 1.5.0.6(chyba ta cyferka) i ku mojemu zdziwnieniu menu się nie rozjeżdza... bo go nie ma Znikneło. Taką samą sytuację mam na mini operze oraz przeglądarce w konsoli. A z tej ostatniej często korzystam i miło by było gdyby zaczeło działać. Czekam na jakąś pomoc/sugestie dot. rozwiązania tego problemu!

Niestety, ale muszę podbić temat bo nowego nie chce zakładać. Nic nie przynosi efektu. W tym momencie wogóle nie widać menu. Jest pustka. Bardzo proszę, żeby ktoś na to rzucił okiem, bo walidacje przechodzi poprawnie, a menu nie widać :/

Ten post edytował ArekJ 16.12.2008, 17:30:22

[Gryf]

hmm... tylko kto dziś używa ff'a w tak starej wersji?
kolega powinien się zaprzyjaźnić z firebug'iem ;]
;] przepisz ten css do porządku
bo tak to ciągle będziesz coś poprawiać w 10 miejscach ;]

[ArekJ]

Niestety, ale nie mam FF2. Błąd ten występuje również na mojej konsoli. A FireBug pod FF3 mi nic nie wywala. Szczerze to zabardzo nie wiem jak mu kazać przeskanować CSS

[Gryf]

jak to nie masz ff'a w takiej wersji google nie boli ściągnij i działaj

Ten post edytował Gryf 21.12.2008, 18:31:25

[ArekJ]

Nie wiem jak to zainstalować pod Linuxem i to w dodatku wersji na PPC :/ Ale może ktoś by mógł mi te błędy przepisać?