Problem mit css

    Ich hab mich nun an mein Menü gewagt (siehe Beitrag weiter unten)
    Ich habe versucht es mit css zu realisieren.
    Doch leider liefert jeder Browser ein anderes Ergebnis. Der IE kommt dabei dem was ich haben will noch am nächsten. Firefox und Opera versagen total.

    Hier die Seite: Man vergleiche besonders das Menü links!
    http://mitglied.lycos.de/sirtobiiv/ambilight/ambilight.php

    Woran kann das liegen? Warum machen Firefox und Opera den hover-Effekt gar nicht? Opera verhunzt zudem noch das Layout im Gästebuch.

    Das css-Stylesheet:

    und noch das Menü:

    Code
    <div id="menue">[url='ambilight.php']Ambilight[/url]
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
</div>

    Ich bin für jeden Tipp dankbar. Zur Not muss ich eben alla Attribute für jedes div und jeden Link im Quelltext setzen. Das kann ja aber nicht der Sinn der Sache sein.

    Gruß
    Nyctalus Noctula

    Der Hauptfehler:

    Code
    #menue li a:hover, {


    Nimm das komma da weg, dann gehts.
    und verbesser auf jeden Fall das mit den <ul>s und pass den css code an:

    Code
    #menue ul li a, #menue ul li a:link, #menue ul li a:visited, #menue ul li a:active {


    und

    Code
    #menue ul li a:hover {


    Gruß,
    Jojo


    ul ist gut, reicht aber noch nicht:

    Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.

    Mach dir mal zur Vorsicht zunächst Sicherungskopien und gehe dann wie folgt vor:

    Diesen Teil komplett löschen:

    Hier das Komma löschen:

    Zitat

    #menue a:hover, {

    Falls du die Aufzählungspunkte weghaben willst, füge das in die CSS ein:

    Code
    #menue li
{list-style-type: none;}

    Schließlich packe deine Links wie von jojo empfohlen in eine ul:

    Alternative I:

    Code
    <div id="menue">
<ul>
[*][url='ambilight.php']Ambilight[/url]
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
[/list]
</div>

    Evtl. für ul noch folgendes hinterlegen:

    Code
    #menue ul {margin: 0;}

    Alternative II:

    Code
    <div id="menue">
[url='ambilight.php']Ambilight[/url]
<ul>
[*][url='ambilight1.php']weitere Fotos[/url]
[*][url='ambilight2.php']Bauanleitung[/url]
[*][url='ambilight3.php']Stückliste[/url]
[/list]
</div>


    Viel Erfolg!

    Vielen Dank. Das Problem mit dem nicht funktionsfähigen Hover ist damit beseitigt.
    Aber Firefox macht immer noch nen Zeilenumbuch nach den [*]. Das soll nicht sein.

    Zitat von sejuma

    ul ist gut, reicht aber noch nicht:

    Du hast mehrfach-Definitionen, die sich teils überlagern und damit die vorherigen außer Kraft setzen.

    Die Mehrfachdefinitionen haben schon ihre Richtigkeit. Oder kann es dadurch zu Problemen kommen?
    Ich möchte ja schließlich, dass der Hauptlink fett ist und die unteren Links nicht. Außerdem sollen die "Buttons" der Unterlinks etwas schmaler sein, dass das Aufzählungszeichen noch davor passt. Das müssten eigentlich alle Überschneidungen sein. Ich hab das so gemacht weil ich schreibfaul bin. So ists am Wenigsten Quelltext.
    Soll ich dafür besser eine Klasse erstellen, dass die Überschneidungen weg sind?

    So. Danke für die Anregungen. Auf den Kommafehler wäre ich selbst nie gekommen. Ich habs jetzt ganz anderst gelöst. Jetzt sind auch die Überschneidungen weg.

    Nochmal das css-File:

    und das menü:

    Code
    <div id="menue" class="hauptlink">[url='ambilight.php']Ambilight[/url]</div>
<div id="menue" class="link">[url='ambilight1.php']weitere Fotos[/url]
[url='ambilight2.php']Bauanleitung[/url]
[url='ambilight3.php']Stückliste[/url]
</div>