[css] div-container verschiebt sich bei href auf internen ankerpunkt

[wreckedcream]

hallo! ich verzweifele gerade an folgendem problem: wenn ich auf meiner site ein link auf einen "internen ankerpunkt" mache, dann verschiebt sich der div-container um 1 bis ca. 3 pixel nach oben, d.h. er wird falsch dargestellt: der obere rahmen fehlt (und wenn ein scrollbalken vorhanden ist dann fehlen auch 1 bis ca. 3 pixel des oberen scroll-buttons).
ich stecke mitten in der entwicklung einer site und habe es leider nicht geschafft, das problem zu isolieren.
unter http://www.customtools.de/meixner/in...ontent=service kann man es aber sehen.
hier noch die meines erachtens relevanten auszüge der style-definitionen:

.content{
width:692px;
margin:10px 20px 10px 20px;
display:block;
clear:both;
float:left;
position:relative;
}
.frameContents {
/*width:800px;height:600px;*/
background-color:#ffffff;
position:absolute;
overflow:auto;
border:2px solid #CC0000;
top:0px;
left:0px;
z-index:0;
}

falls ihr noch mehr infos braucht: bitte nachfragen!

...und: sorry für die fehlende gross/kleinschreibung... ist gewohnheit und ich habe hier (natürlich) erst geposted und dann das "1x1 der beitragserstellung" gelesen ;o)... danke vorab!

[Nightline]

Puuh, da herrscht Chaos im Code. Hab leider nicht die Zeit, mich da detailiert reinzukämpfen, aber ich möchte dir ein paar allgemeine Hinweise geben:

- Du schreibst zwar auf der Seite "Optimiert für IE", aber ob das so gescheit ist? Der Marktanteil von Firefox ist mittlerweile hoch genug, um ihn nicht mehr ignorieren zu können. Sieh dir die Seite mal im Firefox an, da fehlt in der Hauptnavi ein Punkt und in der Subnavi gleich zwei Punkte.
- Mit welchem Programm erstellst du die Seite (rein interessenshalber)?
- Du machst einen ganz ganz großen Design-Fehler: Du vermischt HTML-Code mit CSS-Code, obwohl du Klassen verwendest. Durch dieses Code-Wirrwarr ist es auch sehr viel schwerer, dein Problem daheim am Rechner einfach nachzubauen um den Fehler zu finden. Außerdem machst du dir damit das Leben selbst schwer, da du Änderungen nicht mehr zentral mit dem externen Stylesheet vornehmen kannst, sondern erst recht wieder in jeder Datei die Änderungen machen musst.
- Ich nehme an du musst diese Seite unter Zeitdruck fertigstellen, oder? Falls aber nicht, würde ich an deiner Stelle eher die Grundlagen von HTML und CSS durchkauen (mit der Hilfe von SELFHTML, guten Tutorialseiten und dem Traum-Projekt ).
--> Du wirst dann 1.) weniger Probleme haben 2.) kürzeren & besseren Code schreiben 3.) für IE und FF kompatible Seiten erzeugen.

[wreckedcream]

@Nightline:
Vielen Dank für die schnelle Antwort; dazu:
- Die Anpassung für FF wollte ich ggfs. erst im Anschluss machen, wenn der Rest steht. Ich habe auch gesehen, dass bei FF die Darstellung nicht korrekt ist. Da mich die unterschiedliche Interpretation aber total *wahnsinnig* macht (und ich noch nicht so viele Erfahrungen mit CSS habe), "verdränge" ich dies derzeit noch.
- Ich verwende Phase5.
- Dass man HTML- und CSS-Code eigentlich nicht mischen soll und warum, ist klar. Ich habe es hier lediglich gemacht wegen den Größenangaben, damit ich für alle 4 Rahmen die gleichen Styles verwenden kann. (Sehe aber gerade, dass noch ein paar Attribute (Test-Reste) meine Regel durchbrechen. Der Code ist auch deshalb so verwirrend, weil ich zwecks Test einen Großteil auskommentiert habe.)

Frage mich nun:
- Gibt es eine bessere Methode Styles mehrfach zu verwenden, wenn sich die Größenangaben unterscheiden?
- Ist Dir der Darstellungs-Bug schonmal begegnet? (Trotz des "Code-Wirrwarrs" erlaube ich mir mal es einen "Bug" zu nennen ;o) Woran könnte es liegen?

Thanks!
wreckedcream ;o)
Beste Grüße,

[Nightline]

- Die Anpassung für FF wollte ich ggfs. erst im Anschluss machen, wenn der Rest steht. Ich habe auch gesehen, dass bei FF die Darstellung nicht korrekt ist. Da mich die unterschiedliche Interpretation aber total *wahnsinnig* macht (und ich noch nicht so viele Erfahrungen mit CSS habe), "verdränge" ich dies derzeit noch.

Alles klar! Aber laß dir aus Erfahrung gesagt sein, dass eine nachträgliche Anpassung nicht weniger wahnsinnig macht!

- Dass man HTML- und CSS-Code eigentlich nicht mischen soll und warum, ist klar. Ich habe es hier lediglich gemacht wegen den Größenangaben, damit ich für alle 4 Rahmen die gleichen Styles verwenden kann.
Frage mich nun:
- Gibt es eine bessere Methode Styles mehrfach zu verwenden, wenn sich die Größenangaben unterscheiden?

Jein. Verstehe jetzt deine Vorgangsweise. Eine Möglichkeit wäre, jedem DIV eine zentrale Klasse mit den Einstellungen geben, die bei allen gleich sein sollen. Dann noch zusätzlich eine ID mit den Größenangaben für jeden Rahmen anlegen.
Also --> <div id="rahmen_unten" class="rahmen"></div>

- Ist Dir der Darstellungs-Bug schonmal begegnet? Woran könnte es liegen?

Mir persönlich noch nicht, gesehen habe ich sowas schon öfters. Wie gesagt habe ich keine Lösung dafür, aber ich würde mal das Grundgerüst deiner Seite neu erstellen und alle CSS-Angaben weglassen, die für's erste unnötig sind. Dann schrittweise vorgehen, Links einfügen und sofort testen (aber dann in beiden Browsern!!! ). Wichtig ist, dass du immer nach jeder Änderung schaust was passiert. So kommt man dann relativ schnell drauf, WO das Problem eigentlich liegt und kann dann gezielt entgegensteuern!

[wreckedcream]

danke erneut für dein feedback!

Eine Möglichkeit wäre, jedem DIV eine zentrale Klasse mit den Einstellungen geben, die bei allen gleich sein sollen. Dann noch zusätzlich eine ID mit den Größenangaben für jeden Rahmen anlegen.

das werde ich mal so umsetzen, klingt ganz gut ;o).

vorerst wird mir wohl nichts bleiben, ausser wirklich alle styles zu eliminieren und dann sukzessive wieder einzubinden... wenn ich's geschafft habe (oder auch nicht), dann gebe ich bescheid, woran es lag.

thanks again,
wrecked cream

[wreckedcream]

habe die lösung gefunden: die div-container für die schatten am rechten rand hatten als style "height:100%"; dies durch die tatsächliche pixel ersetzt, nun tritt das problem nicht mehr auf.