✔ Design wird im FF nicht richtig dargestellt

[SuReBuRn]

Sorry, konnte keine bessere Überschrift finden. Geht um das:
http://slight.ffworld.info/index_tableless.html

Im Opera alles anstandslos (so wie es soll), im FF2.0 leider nicht. Da wo das Menu ist habe ich eine Liste genutzt, mit padding und margin:0 list-style:none habe ich auch verwendet. Nun weiss ich leider nicht weiter, hat jemand evt. ned Idee?

 

[Warper]

Moin!

Probier mal das:

#pageMenuLeftOuter ul li {
line-height: 3px;
}

Ich versteh nur noch nicht ganz, warum du so viel mit einzelnen Grafiken arbeitest.

Das Menü sollte nach meinem empfinden keine <li>'s mit einer Unterteilungsgrafik enthalten. Die kannst du doch komplett in den Hintergrund tun. Dann legst du das Menü mit samt seinen <li>'s drüber und richtest es mit

#pageMenuLeftOuter ul li {
margin-bottom: 3px;
}

aus... z.B.

Aber Michael hat sicher noch ne bessere Alternative

PS: Ist es beabsichtigt, dass einige Menü-Grafiken 190px breit sind und einige 191px?

 

[SuReBuRn]

Hallo, bin da halt noch nicht so fit drinne
Dein Vorschlag hat schon geholfen, danke! Ein wenig verzogen ist es trotzdem noch, siehe: http://slight.ffworld.info/index_tableless.html

So Sollte es aussehen: http://slight.ffworld.info/index.html

Werde deinen weiteren Vorschlägen jetzt mal nachgehen, Danke


EDIT: ja die grössen sind beim Slicen so entstanden. Habe mich für ul/li entschieden, weil da noch ein Hover drüber soll.

Habe dem #pageMenuLeftInner mal ne hintergrundfarbe gegeben. nun sieht man schön, dass da einfach Freiräume sind..

 

[Warper]

Was dir auch nicht wirklich weiterhilft, aber als kleine Hilfe bei solchen Problemen ist es immer hilfreich sich das Problemkind (das <li> Element) genau anzuschauen. Das funktioniert am besten, wenn man eine hervorstechende Hintergrundfarbe definiert:

In deinem Fall vielleicht:

#pageMenuLeftOuter ul li {
	line-height: 0px;
	background-color: #fff;
	border: 0;
}

Daran sieht man, dass unser Problem ein 1px hoher Rand zwischen Ende der Grafik und Ende des <li>'s ist.

Ich weiß momentan leider keine Abhilfe, außer Grafiken pro <li> als style="background: url("URI");" einzubinden und ein <a href="#" style="display:block">&nbsp;</a> Link zu setzen. Dann müsstest du den einzelnen <li>'s nur noch eine exakte Größe mit height und width geben und das Problem wäre behoben. Aber wie gesagt, wirklich schön wäre das nicht

Grüße,
Steffen

PS: Hilfe kommt bestimmt.

 

[cronimo]

versuchs doch mal mit "/css/style.css"

<link rel="stylesheet" type="text/css" href="/css/style.php" />