Probleme mit Anzeige eines CSS Menüs unter Firefox

[Richard]

Hallo ;)

Ich habe mir ein schönes CSS-Menü zusammengebastelt, was soweit auch funktionierte und vom W3 Validator akzeptiert wurde. Beim Test mit einigen Browsern begannen jedoch die Probleme. Unter dem Internet Explorer 6.0 ist alles ok, doch unter Firefox (0.9) wird einfach das "width" ignoriert, wodurch jeder Button des Menüs eine andere Breite hat, was entsprechend schlecht aussieht.

Im untenstehenden Code ist meine Variante mit a.menu1:link {} - ich habe es aber bereits auch mit div.menu2 a {} ausprobiert, was jedoch zum gleichen Ergebnis führte.

Wo liegt mein Fehler? Danke für jede Antwort ;)

a.menu1:link {
          width : 100px;
          text-align : center;
          text-decoration : none;
          border : 2px solid #f0f0f0;
          padding : 2px 4px;
          color : #336699;
          background-color : #f0f0f0;
          line-height : 16px;
      }
    a.menu1:visited {
          width : 100px;
          text-align : center;
          text-decoration : none;
          border : 2px solid #f0f0f0;
          padding : 2px 4px;
          color : #336699;
          margin-right : 2px;
          background-color : #f0f0f0;
          line-height : 16px;
      }
    a.menu1:hover {
          width : 100px;
          color : black;
          text-align : center;
          text-decoration : none;
          border-top : 2px solid #336699;
          border-bottom : 2px solid #336699;
          border-right : 5px solid #336699;
          border-left : 5px solid #336699;
          background-color : #ffffcc;
          line-height : 16px;
      }

[Zeromancer]

Hallo,

Wo liegt mein Fehler? Danke für jede Antwort ;)

a.menu1:link {
          width : 100px;
          text-align : center;
          text-decoration : none;
          border : 2px solid #f0f0f0;
          padding : 2px 4px;
          color : #336699;
          background-color : #f0f0f0;
          line-height : 16px;
      }

du hast keine Blockelemente. Setze doch mal display:block mit dazu.

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

Unter dem Internet Explorer 6.0 ist alles ok, doch unter Firefox (0.9) wird einfach das "width" ignoriert,

Das ist falsch. Der IE macht es falsch, der Firefox macht es richtig.

a.menu1:link {
          width : 100px;
      }

a ist per Default ein (non-replaced) inline Element. width (und height) ist aber für non-replaced inline-Elemente nicht definiert.
IE hat da einen Bug - er interpretiert width trotzdem.

Nutze die display-Eigenschaft, um aus dem inline-Element ein nicht-inline-Element zu machen.

cu,
Andreas

[Richard]

Vielen Dank Andrè und Andreas!

Nun klappt es wunderbar. Es lag wirklich am fehlenden display:block;