Reihenfolge in CSS-Datei und dynamisches Layout

TDKBacke

Hallo.

Beim Überarbeiten meiner HP bin ich auf zwei Probleme gestoßen, zu denen ich eure Hilfe gebrauchen könnte.

Hier erstmal die Links:
Testseite
Stylesheet
So soll es aussehen (Opera 7/WIN98)
So sieht es meistens aus (Mozilla/Red Hat

1. Reihenfolge in CSS-Datei
Je nachdem, ob die Linkattribute (a:visited, a:hover usw) in der zentralen CSS-Datei vor oder nach BODY stehen, wird entweder die Linkfarbe oder die globale Hintergrundfarbe im IE und Mozilla nicht korrekt angezeigt. Ändert man dann noch zusätzlich die Reihenfolge der einzelnen Linkattribute untereinander wird es völlig chaotisch:
Mal streikt der Hover-Effekt komplett, dann wieder nur bei bereits besuchten Links.
Bei der momentanen Anordnung funktioniert die Sache nur in Opera 7 wie gewünscht.
Kann mir vielleicht jemand verraten, wie man dieses Problem beheben kann?

2. DIV-Elemente
Damit sich das Layout dynamisch an die Auflösung/Fenstergrösse anpasst, habe ich die Dimensionen der einzelnen Elemente größtenteils über Prozentangaben
definiert. Unter Opera 7 und im IE funktioniert das auch wieder wunderbar, jeder andere Browser, den ich getestet habe, kommt mit meinen Angaben augenscheinlich nicht so ganz klar. Fast immer sind die Elemente zu lang und überlappen sich.
Da die Informationen, die ich zu diesem Thema im Netz gefunden habe, ziemlich mager ausgefallen sind, wäre es nett, wenn mir jemand hier einmal meine Fehler und die richtige Methode aufzeigen könnte.

[ Dieser Beitrag wurde am 17.04.2003 um 19:10 Uhr von TDKBacke editiert. ]

[ Dieser Beitrag wurde am 17.04.2003 um 19:11 Uhr von TDKBacke editiert. ]

Henno

Also erstmal darf in einer Stylesheet Datei kein HTML sein (wie bei dir <style type="css"> und </style> ). Nimm das also einfach raus.

Dann ist es natürlich ungünstig, sowas über position:absolute zu lösen. Geht natürlich auch.

Gib mal noch an:

body {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   bottom:auto;
}

TDKBacke

Original erstellt von Loggy:
Also erstmal darf in einer Stylesheet Datei kein HTML sein.

Ui. Danke, damit wäre das Mysterium der unwilligen Links gelöst. (Dabei könnte ich schwören, dass ich das einmal so in SelfHTML gelesen habe ...)

**

Dann ist es natürlich ungünstig, sowas über position:absolute zu lösen.

**
Echt? Aber bei relative muss ich doch immer die Größe eines Elements wissen und bei static kann ich überhaupt nichts angeben. Fixed macht auch keinen Sinn.
Was benutzt man denn in der "Musterlösung"?

Der Grund für die überlangen, sich überlappenden Elemente war übrigens eine ungünstige Kombination von padding, width und left.
Das konnte ich beseitigen und nun sieht die Seite in Opera 6/7 und Mozilla wie gewünscht aus. Der IE kommt damit allerdings überhaupt nicht mehr klar. Habe ich noch etwas übersehen oder liegt das an der mangelnden CSS-Unterstützung des IE? (Was ich nicht glaube, denn sehr komplex ist die Seite ja nicht.)

Henno

Ich würde sowas einfach über floats machen (einfach für die Navi float:left; festlegen und der Rest müsste sich richtig anpassen).

Der Unterschied zwischen richtigen Browsern und dem IE ist, dass der IE als Breite eines Blockes die Ränder (padding und border) nicht mitzählt. Das kannst du verhindern (bzw. minimieren), indem du padding auf 0px setzt und einfach den margin der in dem Block vorhanden Elemente erhöhst.