frank: width angabe geht nicht im nn6+

hallo,

da ich meine links mit css formatieren möchte und sie einen button effekt haben sollen, wurden sie per css auf eine breite von 107px gesetzt.
leider funktioniert das bisher nur im i.e richtig.

hier mal der verwendete css-code:

.mnlslidehr {  width:107px; font:bold 10px Verdana, Arial, Helvetica, sans-serif; }
A.mnlslidehr { BORDER-RIGHT: #BA892C 1px solid; BORDER-TOP: #FFEB99 1px solid; BORDER-LEFT: #FFEB99 1px solid; CURSOR: hand; BORDER-BOTTOM: #BA892C 1px solid; PADDING:2px; BACKGROUND-COLOR: #FFCC00; COLOR:#ffffff; width:107px; text-decoration:none;}
A.mnlslidehr:visited { BORDER-RIGHT: #BA892C 1px solid; BORDER-TOP: #FFEB99 1px solid; BORDER-LEFT: #FFEB99 1px solid; CURSOR: hand; BORDER-BOTTOM: #BA892C 1px solid; PADDING:2px; BACKGROUND-COLOR: #FFCC00; COLOR:#ffffff; width:107px; text-decoration:none;}
A.mnlslidehr:hover { BORDER-RIGHT: #FFEB99 1px solid; BORDER-TOP: #BA892C 1px solid; BORDER-LEFT: #BA892C 1px solid; BORDER-BOTTOM: #FFEB99 1px solid; BACKGROUND-COLOR: #FFE066; COLOR:#DF0632; width:107px; }
A.mnlslidehr:active { COLOR: #DF0632; TEXT-DECORATION: none; width:107px; }

die width angabe wird nur vom i.e. 5+ richtig interpretiert, obwohl der nn6+ laut css1 definition diesa angabe verstehen müsste.
die links ruf ich dann so auf: <a href="irgendwas" class="mnlslidehr"></a>

weiß jemand rat?
danke
frank

  1. Hi Frank,

    da ich meine links mit css formatieren möchte und sie einen button effekt haben sollen, wurden sie per css auf eine breite von 107px gesetzt.

    wenn der M$IE eine andere Breite rendert als gute Browser, liegt er falsch (Box Model Bug). Welchen Doctype verwendest du? Ein guter Suchbegriff für dich ist Doctype Switching.

    So ist's richtig: Angezeigte Breite = width + padding + border + margin.

    leider funktioniert das bisher nur im i.e richtig.

    Das bezweifle ich. Aber vielleicht hat N6 einen Bug (er ist eine ziemliche Krücke), teste besser mit N7.

    LG Roland

    1. hallo roland,

      habe das problem umgangen,

      der link sitzt in einer tablle, welche genauso breit wie der link (107px) ist.
      da ich ja eh diverse css für die gängigen browser benutze.
      bekommt der nn6/7 nun eine klasse, welche die tabelle per hover, etc ansteuert. der im css für den msie hingegen ist diese klasse nicht definiert.

      damit kann ich leben und es funktioniert.
      frank

    2. Hi,

      da ich meine links mit css formatieren möchte und sie einen button effekt haben sollen, wurden sie per css auf eine breite von 107px gesetzt.
      wenn der M$IE eine andere Breite rendert als gute Browser, liegt er falsch (Box Model Bug).

      Nein, ausnahmsweise ist das mal nicht der Box Bug.

      leider funktioniert das bisher nur im i.e richtig.

      auch falsch.

      a ist ein non-replaced inline-Element. width ist aber auf non-replaced-inline-Elemente nicht anwendbar:
      'width'
          Value:   <length> | <percentage> | auto | inherit
          Initial:   auto
          Applies to:   all elements but non-replaced inline elements, table rows, and row groups
          Inherited:   no
          Percentages:   refer to width of containing block
          Media:   visual
      (http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width)

      cu,
      Andreas

      --
      Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
      1. Hi Andreas,

        da ich meine links

        tjo, hab' ich wohl überlesen - das passiert mir relativ oft in letzter Zeit. Ich sollte besser nicht nebenbei arbeiten ;)

        LG Roland

  2. da ich meine links mit css formatieren möchte und sie einen button effekt haben sollen, wurden sie per css auf eine breite von 107px gesetzt.
    leider funktioniert das bisher nur im i.e richtig.

    Nein, da funktioniert es offensichtlich falsch. Erfahrungsgemäß kann man davon ausgehen, daß bei Unterschieden zwischen IE und Gecko-Browsern (Netscape 6+, Mozilla und Co) der IE es falsch macht und die Gecko-Teile richtig.
    Bei Deiner unten stehenden Konstruktion wirst Du zum Beispiel auch auf den IE-Fehler treffen, die Breite (width), Rand (border-width) und Abständen (padding/margin) falsch zu berechnen.

    Generell solltest Du Gecko-Browser zum Testen benutzen und die Browser in den Standardmodus setzen: http://www.hut.fi/~hsivonen/doctype.html. Nur dann kannst Du Dich auf das verlassen, was in den CSS-Dokus steht.

    A.mnlslidehr { BORDER-RIGHT: #BA892C 1px solid; BORDER-TOP: #FFEB99 1px solid; BORDER-LEFT: #FFEB99 1px solid; CURSOR: hand; BORDER-BOTTOM: #BA892C 1px solid; PADDING:2px; BACKGROUND-COLOR: #FFCC00; COLOR:#ffffff; width:107px; text-decoration:none;}

    Die width-Eigenschaft funktioniert nur bei Blockelementen, <a>-Elemente fallen aber standardmäßig in die Kategorie "inline". Dementsprechend kann width nicht bei <a> funktionieren. Siehe http://www.w3.org/TR/CSS2/visudet.html#the-width-property.

    Abhilfe: <a> in Blockelemente verwandeln: display:block. Fragt sich nur, was passiert, wenn die Texte breiter als 107 Pixel sind..

    Gruß,
      soenk.e

    1. Hi,

      Die width-Eigenschaft funktioniert nur bei Blockelementen,

      Falsch, siehe auch mein anderes Posting:

      all elements but non-replaced inline elements, table rows, and row groups

      Das sind etwas mehr als "nur Blockelemente".

      cu,
      Andreas

      --
      Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
      1. Die width-Eigenschaft funktioniert nur bei Blockelementen,

        Falsch, siehe auch mein anderes Posting:

        all elements but non-replaced inline elements, table rows, and row groups

        Das sind etwas mehr als "nur Blockelemente".

        Ja, Herr. Auch wenn ich bezweifle, daß diese Korinte aus Franks Sicht momentan einen nennenswerten Unterschied macht.. :>

        Gruß,
          soenk.e

        1. Ja, Herr. Auch wenn ich bezweifle, daß diese Korinte aus Franks Sicht momentan einen nennenswerten Unterschied macht.. :>

          Hi,

          ...da wir gerade dabei sind:
          Korinthen [frz. raisins de Corinthe >Korinther Trauben<, nach Korinth]

          -> also auch die gekackte Korinthe so wie die griechische Stadt mit "th"

          siehe auch:
          http://www.korinthenkacker-club.de/
          (nein, ich bin nicht Ehrenmitglied)

          Inzaire