✔ Dropdown Menu / Problem = Unterschied IE - Firefox

[versuch13]

Hi,

in der neuen Selfhtml Version ist ein CSS / JS Dropdown Menü. Das Design ist nicht das beste, aber es funktioniert und ich habe schon ewig nach so einer einfachen Lösung gesucht und gebastelt.

Also, wie gesagt, es funktioniert, aber leider ist die Darstellung im IE und Firefox unterschiedlich.
Zu viel zum erklären, darum hier ein Link:

....

>> Die Untermenü Punkte sollten alle dieselbe länge haben, so wie es im IE ausschaut.

So wie es im IE dargestellt wird, sollte es auch im Firefox aussehen. Ich habe ewig hin und her probiert und mittlerweile eigentlich den Überblick schon verloren.
Wäre sehr dankbar wenn sich das mal jemand anschauen könnte.


greetz




EDIT 11.10.2005: Sorry, hab die Seite offline genommen weil der Thread hier als noch vor der Seite bei google gefunden wurde..

 

[Maik]

Hallo versuch13,

habe deinen Source mit dem Original-Demo abgeglichen und festgestellt, dass du für die Menüpunkte width:100% gewählt hast:

ul#Navigation li ul li a { /* Test */
    display: block;
    width:100%;
    text-align:left;
    padding: 0.2em 2em;
}
* html ul#Navigation li ul li a {  /* Test */
    display: block;
    width:100%;
    text-align:left;
    padding: 0.2em 2em;
}

Vielleicht solltest du sie stattdessen mit der Einheit px bzw. em dimensionieren, so wie im Original:

ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }

greez, maik.l

 

[versuch13]

Hi Maik,

ja, ich habe die 100% genutzt, damit sich die größe anpaßt wenn der Link länger ist als die Fest angegebene Breite wie z.B. 6.4em. Wenn ich es mit der festen Breite mache, kommt das hier im Firefox bei raus:



Und im IE sieht es dann auch nicht aus wie es sollte.
Nur nochmal zur Verdeutlichung, also, die Unterkategorieren von z.B. Seite 2, sollten sich alle der längsten Unterkategorie von Seite 2 anpaßen.


danke.

greetz



EDIT 11.10.2005: Sorry, hab die Seite offline genommen weil der Thread hier als noch vor der Seite bei google gefunden wurde..

 

[Maik]

Hallo,

den von mir geposteten CSS-Code-Schnippsel aus dem Original-Demo solltest du ja auch nicht einfach in dein Style-Sheet copy + pasten, sondern in deinem CSS-Code für die Links eine Weitenangabe bestimmen.

Da dein DIV #nav eine Weite von 600px besitzt, funktioniert / vereinbart sich wahrscheinlich auch nicht die em-Einheit aus dem Original-Source für die Weite deiner Links.

Warum der IE die kürzeren Links den Längeren automatisch anpasst, sie also ausdehnt, kann ich dir nicht sagen - ich weiss nur, dass die anderen Browsers es nicht machen. Habe im Original-Demo die Weitenangaben für die Links entfernt und die Seite anschliessend browserübergreifend im IE 5.5, FF 1.0.2, Mozilla 1.6, NN 7.0 und Opera 7.23 gecheckt.

Anmerkung: im Opera funktioniert das Einblenden der Submenüs überhaupt nicht.

Resumé: meines Erachtens wirst du ohne entsprechend fixe Weitenangaben für die Links nicht auskommen.


greez, maik.l

 

[versuch13]

Ja, ich hatte das schon mit px angaben gemacht. Ist ja auch eine Möglichkeit, doch dann sind die Untermenüs alle gleich breit, und das wollte ich vermeiden. Aber dann lasse ich es einfach so. Danke nochmals.


greetz