Problem mit absoluter Positionierung von <div>-Elementen

[Philipp Vallant]

Hallo!

Nach dem ich nun einige Zeit das Forum durchforstet habe, aber irgendwie keine passende Lösung gefunden habe, formuliere ich hier mal mein Problem. Hoffe es kann mir jemand weiterhelfen.

Ich habe versucht für meine Homepage ein dynamisches Menü mit Hilfe von CSS und JavaScript zu erstellen. Die Anzeige im Firefox 1.5.0.1 sowie im IE 6.0.x funktioniert einwandfrei. Leider ergibt sich bei der Anzeige im Firefox 1.0.7 ein kleines Problem.

Ich habe zur Veranschaulichung des Problems 2 Screenshots angefertigt, einmal mit FF 1.5.0.1 und einmal mit FF 1.0.7.

Screenshot FF 1.5.0.1 (korrekte Darstellung)
http://www.serfauser.net/users/phalluz/screens/screen2.jpg

Screenshot FF 1.0.7 (fehlerhafte Darstellung)
http://www.serfauser.net/users/phalluz/screens/screen.jpg

Und hier noch das ganze in Action:
http://www.serfauser.net/users/phalluz/navi.html

Das Problem ist, dass das <div>-Element, welches absolut (relativ zu seinem Elternelement, dem <li>-Tag) positioniert ist, nur maximal so breit ist, wie das Elternelement selbst. Durch die Angabe einer Breite mit width:xy lässt sich das Ganze zwar beheben, da die Menüstruktur aber aus einer Datenbank gelesen werden soll, und sich die Breite dem (variablen) Inhalt anpassen soll, suche ich nach einer anderen Möglichkeit.

Habe schon ziemlich viel herumprobiert, aber konnte bisher keine Lösung für das Problem finden. Hoffe jemand von euch kann mir helfen.

Danke im Voraus
Philipp

PS: Sollte das Thema bereits einmal besprochen worden sein, und ich den Thread nicht gefunden haben sollte, wäre ich dankbar für einen Link.

[Anton Brass]

Moin!

Ehm, also wenn du mich fragst, kein Mensch geht hin und probiert seinen Code an allen möglichen Versionen von Browsern aus. Also wenn du eine 100% Kompabilität anstrebst, wirste diese Nav-Leiste nicht mal 2017 zum Laufen bekommen.

Generell nimmt man sich IE und FireFox als Leitlinie, in meinen Augen ist Opera z.B. auch schon Kür (insofern das nicht alles so anzeigt wie FireFox).

Ansonsten kann man dir nicht ohne Code helfen.

Wahrscheinlich ist ein Fehler in der Deklarierung der einzelnen Größenangaben, über die die neueren Versionen hinwegschauen. Meistens ganz Banale dinge, wie Gänsefüßchen, oder Reihenfolge der Eigenschaften.

[Philipp Vallant]

Ehm, also wenn du mich fragst, kein Mensch geht hin und probiert seinen Code an allen möglichen Versionen von Browsern aus. Also wenn du eine 100% Kompabilität anstrebst, wirste diese Nav-Leiste nicht mal 2017 zum Laufen bekommen.

100%ige Kompatibilität strebe ich eh nicht an, wäre halt schön wenns zB mit FF 1.0.7 auch laufen würde, zumal es sich ja (optisch) nur um einen kleinen Bug handelt, der vielleicht relativ einfach zu beheben wäre. Desweiteren habe ich das Ganze mittlerweile (aus reiner Neugier) auch mit anderen Browsern getestet, beispielsweise dem Konqueror, bei dem die Darstellung ebenfalls so aussieht wie mit dem 1.0.7er. Also noch ein kleiner Grund zur Behebung des Problems :-)

Ansonsten kann man dir nicht ohne Code helfen.

Najo, war ein bissl faul drum hab ich nur den Link zum Script gepostet ;-) aber werde noch versuchen die relevanten Code Teile nachzureichen.

[Anton Brass]

generellen Versuch gestartet, ob er bei einer festen width-angabe das richtig ausgibt?

[Philipp Vallant]

generellen Versuch gestartet, ob er bei einer festen width-angabe das richtig ausgibt?

zitat aus meinem 1. posting:
  Durch die Angabe einer Breite mit width:xy lässt sich das Ganze zwar beheben, da die Menüstruktur aber aus einer Datenbank gelesen werden soll, und sich die Breite dem (variablen) Inhalt anpassen soll, suche ich nach einer anderen Möglichkeit.

[Anton Brass]

width: 100% probiert?

[Philipp Vallant]

width: 100% probiert?

jo, führt leider nur dazu dass sich das Darstellungsproblem auch im 1.5.0.1er ergibt...

[Philipp Vallant]

so hier noch der relevante Quelltext:

  
div#pv_m  
{  
  padding: 0px;  
  position: absolute;  
  top:;  
  left:;  
  display: block;  
}  
  
div#pv_m li  
{  
  margin: 0px;  
  padding: 3px;  
  position: relative;  
  list-style: none;  
  float: left;  
  white-space: nowrap;  
}  
  
div#pv_m li#tl div  
{  
  padding: 0px;  
  position: absolute;  
  top: 25px;  
  left: -1px;  
  display: none;  
}  
  
div#pv_m li#tl li  
{  
  margin: 0px;  
  padding: 3px;  
  position: relative;  
  float: none;  
  white-space: nowrap;  
}  

  
<div id="pv_m">  
<ul>  
 <li id="tl"><b>Home</b>  
  <div>  
   <ul>  
    <li><a href="test1.htm">Willkommen</a></li>  
    <li><a href="test1.htm">Top-Angebote</a></li>  
    <li><a href="test1.htm">News</a></li>  
   </ul>  
  </div>|  
 </li>  
</ul>  
</div>