unerklärlicher "Fehler" bei absoluter Positionierung

[Der Dicki]

Hallihallo!

Ich habe auf dieser Seite ein mir unerklärliches Phänomen.

Und zwar geht es um die Navigation, genauer gesagt um die abgerundeten Ecken darin. (Ich denke, es sollte zumindest zu sehen sein, wo sie hin _sollen_ ;) )

Zum HTML:
Die Navigation als solche ist eine Liste (ul) mit der ID #navigation, welche per float:left; am linken Bildschirmrand klebt. Darin enthalten sind nach folgendem Schema die Navigationslinks:

  
<ul id="navigation">  
  <li>  
     <a class="navibutton" href="linkziel">  
         Linktext  
         <div class="navicorner topright"></div>  
         <div class="navicorner btmright"></div>  
     </a>  
  </li>  
  
  <!-- und natürlich noch ein paar weitere <li>s... -->  
</ul>  

Per CSS möchte ich dann die beiden <div>s innerhalb der <a>s absolut positionieren, und zwar jeweils am rechten oberen bzw. rechten unteren Rand:

  
#navigation {  
 float: left;  
 width: 16em;  
 /* height: 100%; */  
 list-style-type: none;  
 padding: 0em;  
 margin-left: 0em;  
 margin-right: 2.5em;  
}  
  
#navigation li {  
 position: relative;  
 padding: 0em;  
 height: 2.6em;  
 margin: 0em;  
 margin-bottom: 0.5em;  
}  
  
#navigation li a.navibutton:link , #navigation li a.navibutton:visited{  
 display: block;  
 text-align: right;  
 color: #E6CD1F;  
 font-weight: bold;  
 text-decoration: none;  
 padding: 0em;  
 padding-right: 1em;  
 padding-top: 0.5em;  
 margin: 0em;  
 height: 2.2em;  
 margin-top: 0.2em;  
 margin-bottom: 0.2em;  
 background-color: #4A693C;  
 z-index: 1;  
}  
  
#navigation li a.navibutton:hover {  
 background-color: #E6CD1F;  
 color: #4A693C;  
}  
  
#navigation li a.actsite:link, #navigation li a.actsite:visited {  
 background-color: #E6CD1F;  
 color: #4A693C;  
}  
  
.navicorner {  
 position: absolute;  
 padding: 0px;  
 margin: 0px;  
 border: none;  
 width: 1em;  
 height: 1em;  
 z-index: 2;  
}  
  
.topright {  
 top: 0em;  
 left: 15em;  
 background-image: url('images/ecke_gruen_ro.gif');  
        background-repeat: no-repeat;  
        background-position: top right;  
}  
  
.btmright {  
 /* top: 1.6em; */  
 bottom: 0em;  
 left: 15em;  
 background-image: url('images/ecke_gruen_ru.gif');  
        background-repeat: no-repeat;  
        background-position: bottom right;  
}  

Der Internet Exploder zeigt mir genau das Ergebnis, welches ich erreichen wollte. Der Firefox hingegen zeigt mir die rechte untere Ecke nicht in der "richtigen" Position (wobei ich davon ausgehe, daß ausgerechnet DER es _richtig_ macht.)

Ich habe auch schon versucht, die beiden Ecken _beide_ mit der Eigenschaft top:xxx em zu positionieren, mit einem sehr ähnlichen unglücklichen Effekt.
Ebenso habe ich in allen in Frage kommenden Elementen schon mit allen margins, paddings und borders herumprobiert, auch ohne Erfolg.

Meine Frage also: Was habe ich übersehen, bzw. nicht bedacht? Habe ich mich in Denkfehler verrannt? Wie kriege ich die rechte untere Ecke an den rechten unteren Rand des Links?

Irgendjemand eine Idee?

Viele liebe Grüße,
Der Dicki

PS: Nocheinmal die Links:
    HTML : http://derdicki.dyndns.org/test/quaritsch/index.html
    CSS  : http://derdicki.dyndns.org/test/quaritsch/includes/css/screen.css

[Detlef G.]

Hallo Dicki

<ul id="navigation">
  <li>
     <a class="navibutton" href="linkziel">
         Linktext
         <div class="navicorner topright"></div>
         <div class="navicorner btmright"></div>
     </a>
  </li>

  
Das ist nicht zulässig, [a darf nur Inlineelemente enthalten](http://de.selfhtml.org/html/referenz/elemente.htm#a) ([W3C](http://www.w3.org/TR/html401/struct/links.html#edef-A)). Damit dürfte die Anzeige in verschiedenen Browsern eher zufällig sein.  
  
Warum machst du es denn überhaupt so kompliziert?  
  
~~~html
<ul id="navigation">  
  <li>  
    <a href="linkziel">  
      <span>Linktext</span>  
    </a>  
  </li>  

»» #navigation li a {  
     display: block;  

>   background-image: url('images/ecke_gruen_ro.gif');  
>          background-repeat: no-repeat;  
>          background-position: top right;  
> }  
>   
> #navigation li a span {  

     display: block;  

>  background-image: url('images/ecke_gruen_ru.gif');  
>         background-repeat: no-repeat;  
>         background-position: bottom right;  
> }  

Natürlich musst du noch dann weiter Anpassungen vornehmen, z.B. die Padding-Werte dem span zuweisen, statt dem a.

Der Internet Exploder zeigt mir genau das Ergebnis, welches ich erreichen wollte.

Meiner zeigt überhaupt keine abgerundeten Ecken.

Auf Wiederlesen
Detlef

[Der Dicki]

Hallihallo!

Danke für Deine Hinweise!
Besonders an das nicht erlaubte div im Verweis wäre ich wohl erst zum Schluss beim Validieren gekommen. Du hast mir also eine Menge Arbeit gespart :) Auch dafür nochmal Danke.

Deinen Vorschlag werde ich dann jetzt mal ganz schnell umsetzen, der sieht auch gleich viel stimmiger aus als Meiner :)

Meiner zeigt überhaupt keine abgerundeten Ecken.

Ich hatte fast so Etwas befürchtet... Ich hoffe, bei meinem nächsten Versuch sind sie da.

Also, herzlichen Dank erstmal, hoffentlich komme ich von hier aus weiter.

Viele liebe Grüße,
Der Dicki

[Detlef G.]

Hallo Dicki,

Besonders an das nicht erlaubte div im Verweis wäre ich wohl erst zum Schluss beim Validieren gekommen. Du hast mir also eine Menge Arbeit gespart :) Auch dafür nochmal Danke.

Nicht erst validieren, wenn alles fertig ist, sondern erst das (X)HTML fertig machen, validieren und ansehen, wie es ohne CSS aussieht. Erst dann das gewünschte Aussehen mittels CSS herstellen. Fast jede Änderung in der (X)HTML-Struktur kann wieder eine Anpassung im CSS erforderlich machen.
Wer sich viel Arbeit machen will, machts natürlich andersherum. ;)

Auf Wiederlesen
Detlef

[Der Dicki]

Hallihallo!

Nicht erst validieren, wenn alles fertig ist, sondern erst das (X)HTML fertig machen, validieren und ansehen, wie es ohne CSS aussieht. Erst dann das gewünschte Aussehen mittels CSS herstellen. Fast jede Änderung in der (X)HTML-Struktur kann wieder eine Anpassung im CSS erforderlich machen.
Wer sich viel Arbeit machen will, machts natürlich andersherum. ;)

Du hast natürlich recht, und normalerweise weiß ich das auch...

Ich möchte deshalb an dieser Stelle, quasi aus aktuellem Anlass, noch einmal Alle hier evtl. Mitlesenden vor einer solchen "Arroganz", wie ich sie hier an den Tag gelegt habe, warnen:

"Ach, das HTML ist kein Problem, das mach ich doch mit Links, die Regeln kenne ich in- und auswendig (blabla)"...

=> BÖSE! Niemals die eigene Dummheit unterschätzen!

Wie dem auch sei: Dank Deinem kleinen Schubser in die richtige Richtung habe ich es tatsächlich geschafft, daß die Seite jetzt so aussieht, wie der Grafiker sie haben wollte.
(Tut sie doch, oder? *schwitz*)

Gleich nochmal testen, valide sind die Seiten jetzt jedenfalls.

Also nochmal, vielen Dank und auf Wiederlesen :)

Viele liebe Grüße,
Der Dicki