Mozilla will Linkbreite nicht darstellen ...

[Matthias]

Hallo,

folgendes Problem:

Ich formatiere meine Navigationslinks auf meiner (gerade entstehenden Homepage) mit CSS so:

a.navi:link
  {
   width: 199px;
   border-top-style: solid;
   border-top-width: 5px;
   border-top-color: #f88600;
   font-family: Verdana;
   color: #FFFFFF;
   text-decoration: none;
                         text-align: center;
   background-color: #2d5a83;
  }

a.navi:hover
  {
   width: 199px;
   border-top-style: solid;
   border-top-width: 5px;
   border-top-color: #ffa73f;
   font-family: Verdana;
   color: #FFFFFF;
   text-decoration: none;
                         text-align: center;
   background-color: #2d5a83;
  }

a.navi:visited
  {
   width: 199px;
   border-top-style: solid;
   border-top-width: 5px;
   border-top-color: #f88600;
   font-family: Verdana;
   color: #FFFFFF;
   text-decoration: none;
                        text-align: center;
   background-color: #2d5a83;
  }

(HTML): <a class="navi" href="blabla">Home</a>

Im IE funktioniert das ganz gut, das Design sieht genau so aus, wie ichs gerne hätte. Mozilla scheint aber die width Angaben zu ignorieren. Kennt irgendwer ein workaround? Bisher bin ich im Netz noch nicht fündig geworden ... .

Gruß und Danke

[Ingo Turski]

Hi,

Mozilla scheint aber die width Angaben zu ignorieren. Kennt irgendwer ein workaround?

Du suchst keinen Workaround, sondern eine Erklärung, warum die Breitenangabe ignoriert werden muß: weil width nicht für inline-Elemente definiert ist.

freundliche Grüße
Ingo

[Matthias]

Hi,

gut, Links sind keine Inline-Elemente ... . Aber wie bekomm ich sie dann auf die gewünschte Breite? (Sry für die dumme Frage, beschäftig mich noch net so lang mit CSS)

Gruß und Danke,

Matthias

[at]

Hallo.

gut, Links sind keine Inline-Elemente ...

Nein?

Aber wie bekomm ich sie dann auf die gewünschte Breite?

Indem du die Gegebenheiten im Rahmen der Möglichkeiten von CSS deiner obigen Aussage anpasst.

(Sry für die dumme Frage, beschäftig mich noch net so lang mit CSS)

Nicht die Frage ist dumm, sondern die Tatsache. Für den Anfang empfehle ich dir eine Lektüre.
MfG, at

[MudGuard]

Hi,

a.navi:link
  {
   width: 199px;

a ist - wenn Du es nicht mit der display-Eigenschaft änderst - ein (non-replaced) inline-Element.
width ist nicht definiert für non-replaced inline-Elemente.

a.navi:hover

a.navi:visited

Du willst keinen hover-Effekt für besuchte Links?

Im IE funktioniert das ganz gut,

Nö. Der IE hat den Fehler, die width anzuwenden, obwohl es nicht gemacht werden dürfte.

Mozilla scheint aber die width Angaben zu ignorieren.

Nein, er wendet sie korrekt (nämlich für non-replaced-inline elements gar nicht) an.

Kennt irgendwer ein workaround?

Du meinst, wie man den IE zu korrektem Verhalten bringt?
Nur durch Weglassen der width-Angabe.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Kennt irgendwer ein workaround?

Du meinst, wie man den IE zu korrektem Verhalten bringt?
Nur durch Weglassen der width-Angabe.

Und zusätzlich:

Durch Hinzufügen eines gültigen DOCTYPES.

Einen schönen Samstag noch.

Gruß, Ashura

[Der Dicki]

Hallihallo!

Einen wirklichen Fehler konnte ich nicht entdecken, aber ich weiß auch, daß der Mozilla normalerweise keine Probleme mit width- Angaben hat und diese auch so interpretiert, wie sie angegeben wurden.

Was mir allerdings an Deinem Stylesheet aufgefallen ist, ist die Reihenfolge Deiner Angaben.
Ich habe bei meinen eigenen Angaben auch öfter mal diesen "Fehler" gemacht, und bin immer wieder drüber gestolpert, keine wirkliche Ahnung, warum.
In vielen Fällen hat es mir geholfen,
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
zu beachten, und die Reihenfolge der Pseudoklassen im Stylesheet einzuhalten.

Ich hoffe, das hilft auch in Deinem Fall.

Viele liebe Grüße,
Der Dicki