[ghoti]

Hallo,

ich möchte folgendes Menü haben (siehe bild unten).
Dabei werden die Menüpunkte aus Typo3 als Liste gerendert:

<ul> <li>Erlebniswelten</li> <li>Wellness</li> <ul> <li>Massagen</li> <li>Fitness</li>
    ...
  </ul> <li>Freizeit und Sport</li>
  ...
</ul>

In Opera und Firefox wird das genauso interpretiert, der Internet Exporer schreibt diese Liste intern so um, dabei wird das zweite ul in li reingeschrieben.

<ul> <li>Erlebniswelten</li> <li>Wellness
    <ul> <li>Massagen</li>
...

Das ist nur die Vorgeschichte.
Ich möchte, dass mein Menü so aussieht wie im Bild, das klappt auch schon in FF, aber nicht in Opera und IE.
Hier mein CSS:

#left #menu ul {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
	background-color: blue;
}
#left #menu li {
	margin: 0;
	padding: 0;
	height: 20px;
}
/* normal rendering in firefox and opera */
#left #menu ul ul {
	position: relative;
	top: -20px;
	left: 150px;
	height: 0;
	background-color: yellow;
	width: 150px;
	/*overflow: visible;*/
}
/* ie 6 and 7 */
#left #menu li ul {
	width: 150px;
	height: 0;
	background-color: red;
	overflow: hidden;
}

Bin für eure Ideen dankbar.

[Armin]

moin,

In Opera und Firefox wird das genauso interpretiert, der Internet Exporer schreibt diese Liste intern so um, dabei wird das zweite ul in li reingeschrieben.

Der IE schreibt gar nix um!!! Evtl. hast du irgendwo eine Browserweiche im TS drinn. Browser verändern nix am Quelltext!

Und, es ist auch richtig dass das zweite ul im li steht!!

Sorge erstmal dafür das überall die Ausgabe gleich ist.

Armin

[ghoti]

Hi,
hab mein Problem nun gelöst, ich habe das TS geändert:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28:

1 = GMENU 1 { wrap = <ul class="level1">|</ul> NO = 1 NO.wrap = <li class="level1">|</li> NO { XY = 150,20 backColor = #ffffff 10 = TEXT 10.text.field = subtitle//title 10.fontColor = {$ameli.color100} 10.fontFile = fileadmin/ahausen/fonts/METAPNR_.TTF 10.fontSize = 12 10.offset = 0,16 10.align = right #10.niceText = 1 } ACTIFSUB = 1 ACTIFSUB < .NO ACTIFSUB.wrap = <li class="level1_actsub">| } 2 < .1 2 { wrap = <ul class="level2">|</ul></li> NO.wrap = <li class="level2">|</li> NO.10.align = left } } - ERROR: Line 27: An end brace is in excess.

das ist mein CSS

#left #menu ul {
	position: relative;
	background-color: blue;
	list-style: none;
	margin: 0;
	padding: 0;
}
#left #menu li {
	width: 100px;
	/*height: 20px;*/
	position: relative;
}
#left #menu ul ul {
	position: absolute;
	top: 0;
	left: 150px;
}

Dass der IE nichts umschreibt, ist ein Irrtum. Vielleicht ist der Quelltext nicht anders, aber intern wird diese Liste anders interpretiert. Das kannst du ganz leicht selbst testen:
Schreibe eine Liste, die falsche verschachtelt ist:

<ul> <li>Punkt1</li> <ul> <li>Punkt 1.1</li> </ul> </ul>

Du kannst gerne mehrer Menüpunkte hinzufügen. Und dann schreibst du ein CSS mit folgenden Angaben:

ul {
background-color: yellow;
}
ul ul li {
background-color: red;
}
ul li ul li {
background-color: green;
}

Dann schau dir die Ausgabe in IE und in FF an: in IE ist es grün, in FF rot. Was sagst du dazu?

Danke für deine Hilfe und schönen Vatertag!

[Armin]

moin,

Dass der IE nichts umschreibt, ist ein Irrtum. Vielleicht ist der Quelltext nicht anders, aber intern wird diese Liste anders interpretiert. Das kannst du ganz leicht selbst testen:
Schreibe eine Liste, die falsche verschachtelt ist:

Ja, was denn nun?
Wenn der Quelltext nicht anders ist, wird auch kein Quelltext umgeschrieben. Browser schreiben keinen Quelltext um.

Das der Browser CSS-Angaben anderes umsetzen ist wohl allgemein bekannt und wurde hier schon oft genug besprochen. Leider ist die Umsetzung von CSS auch bei richtiger Syntax nicht überall gleich.

Noch ein Tipp:
Schau die mal wrapItemAndSub an, dann gibt es auch weniger Fehler bei der Verschachtelung von Listen.

Gruß
Armin