✔ unterschiedliche End-Ansicht in IE und Firefox

Hallo zusammen.

Kann sein das meine Frage etwas blöd ist. Ich habe eine Homepage für meine Band erstellt. Soweit, so gut. Ich habe als Vorschau immer Firefox verwendet.
Mein Problem ist nun, wenn man die Site im IE öffnet, verschwindet der Abstand vom untersten Menüpunkt (Impressum) zum nächsten Eintrag. Ich wollte dort auch schon eine Trennlinie (in DW Einfügen --> HTML --> Trennlinie) einfügen, aber die haut dann immer ab in meinen "Main-Part" in der Mitte.

Woran liegt das? Wie kann ich diesen optischen Fehler beheben?

Hier noch die Links zum anschauen der Site:
http://www.secondrun.de oder auf der Demo-Site:
http://www.secondrun.de/demo
Hier hab ich dann mein nächstes Problem was ich schon bei http://www.dreamworker.de gepostet habe:
"Telling-A-Friend Formular"
Hier geht's zu meinem Eintrag: http://www.dreamworker.de/foren/showthread.php?t=29028

Vielleicht kann mir hier auch jemand weiterhelfen.

Danke schonmal im vorraus!

H,

Scharri hat gesagt.:

Mein Problem ist nun, wenn man die Site im IE öffnet, verschwindet der Abstand vom untersten Menüpunkt (Impressum) zum nächsten Eintrag.

Zum Vergrößern anklicken....

in Anbetracht der Tatsache, dass im globalen Dorf mittlerweile vier IE-Versionen vertreten sind (5.x, 6, 7, 8), die sich in ihrer Interpretation der offiziellen CSS-Spezifikationen zum Teil grundlegend voneinander unterscheiden, wäre es uns Hilfeleistenden schon entgegenkommend, die betroffene IE-Version(en) beim Namen zu nennen, um uns die "Vorarbeit" zu ersparen, herauszufinden, von welcher IE-Version du hier überhaupt sprichst.

Aber so, wie ich das beim ersten Überfliegen deines HTML- und CSS-Codes richtig sehe, hast du nicht berücksichtigt, dass die Browser der Konkurrenz beispielsweise einen größeren Initialwert beim Außenabstand für das <p>-Element besitzen, wie die IE-Familie, das im Anschluß des <ul>-Listenmenüs mehrfach folgt.

Hier gilt es, diese diskrepanten Browser-Voreinstellungen zu Beginn des Stylesheets erstmal auf einen gleichnamigen Nenner zu bringen:


... und im weiteren Verlauf der CSS-Formatierung für das Webdokument dort einen dieser beiden Abstände explizit anzugeben, wo er im Dokumentfluß tatsächlich erwünscht ist.

Das inhaltsleere <p>-Element mit dem geschützten Leerzeichen "&nbsp;" würde ich gänzlich aus dem Code entfernen, und stattdessen die margin- o. padding-Eigenschaft nutzen, um einen vertikalen Abstand zwischen den Elementen einzurichten.

Ebenso sehen die einzelnen Browser unterschiedliche vertikale Abstände für das <hr>-Element im Textfluß vor, denen mitunter nicht einheitlich beizukommen ist.

Hier würde ich stattdessen die border-bottom- oder border-top-Eigenschaft nutzen.

mfg Maik

Hi Maik,
Danke für deine Antwort. Ich habe das im IE8 getestet. Aber ich denke, in den anderen IE-Versionen wird das selbe Problem sein.
Ich werde in naher Gelegenheit deine Vorschläge mal versuchen umzusetzen.
Ich bin in Sachen HTML ein Neuling und weiss noch nicht genau worauf man bei den Verschiedenen Browsern achten muss.

Grüßle, Scharri
P.S.: Hast du auch den Eintrag von mir bei dreamworker.de gelesen wegen dem telling-a-friend-formular? Habe bis jetzt noch kein feedback von dort bekommen. Vielleicht kannst ja du mir auch bei diesem Problem zur Seite stehen.
Bei dreamworker.de bin ich CharPainter.

Hallo zusammen!

Ich habe mal zur Ansicht noch 2 Bilder hochgeladen, um mein Problem zu verdeutlichen.

@ Maik
Mit "margin" und "padding" hatte ich leider keinen erfolg.

Hoffe auf Hilfe für einen Anfänger!

Greetings, Scharri

Wie gesagt, ich würde mal dieses inhaltsleere <p>&nbsp;</p>-Element, das nach der Listennavigation folgt, aus dem Quellcode entfernen.

Dies habe ich vergangene Woche in meiner lokalen Testseite durchgeführt, und konnte mit der empfohlenen CSS-Regel sehr wohl einen Erfolg erzielen.

Dass das <hr>-Element neben der Navigation erscheint, ist dem Umstand geschuldet, dass du das Umfließen der Menüpunkte nicht mittels clear:left abbrichst.

Aber auch hier würde ich aus besagtem Grunde auf dieses Element gänzlich verzichten, und stattdessen die vertikale optische Abtrennung mit der border-Eigenschaft vornehmen, die in den Browsern dann auch zu einem einheitlichen Abstand führt, was beim <hr>-Element nicht möglich ist.

mfg Maik

Also, das mit dem <p>&nbsp;</p>-Element habe ich gemacht, ohne verbessertes Ergebnis.
Wenn ich jetzt die vertikale optische Abtrennung mit der border-Eigenschaft vornehmen will, muss ich dann eine neue CSS-Regel erstellen für diesen unteren Abschnitt?
Kann ich das <hr>-Element dann einfach raus löschen?
Wie kann ich das in DW CS4 machen?

mgfg Scharri

Scharri hat gesagt.:

Also, das mit dem <p>&nbsp;</p>-Element habe ich gemacht, ohne verbessertes Ergebnis.

Zum Vergrößern anklicken....

Du sprichst wohl vom ersten deplatzierten <hr>-Element im IE8.

Dazu hatte ich dir vorhin aber schon den Grund und die Lösung genannt.

Scharri hat gesagt.:

Wenn ich jetzt die vertikale optische Abtrennung mit der border-Eigenschaft vornehmen will, muss ich dann eine neue CSS-Regel erstellen für diesen unteren Abschnitt?
Kann ich das <hr>-Element dann einfach raus löschen?

Zum Vergrößern anklicken....

Versteht sich von selbst, dass du für eines der beiden Elemente (<ul> oder <p>) eine border-bottom- oder border-top-Regel vorsehen mußt.

Anschliessend kannst du das <hr>-Element auch einfach rauslöschen.

Scharri hat gesagt.:

Wie kann ich das in DW CS4 machen?

Zum Vergrößern anklicken....

Da mußt du im Handbuch oder in der Hilfe-Datei nachschauen, denn ich nutze Dreamweaver überhaupt nicht.

mfg Maik

Naja, ich werde mal schauen müssen wie ich das hinbekomme. CSS habe ich bis jetzt nur über Dreamweaver bearbeitet sowie den Rest der HP eben auch.

Wie gesagt, ich würde mal dieses inhaltsleere <p>&nbsp;</p>-Element, das nach der Listennavigation folgt, aus dem Quellcode entfernen.

Dies habe ich vergangene Woche in meiner lokalen Testseite durchgeführt, und konnte mit der empfohlenen CSS-Regel sehr wohl einen Erfolg erzielen.

Zum Vergrößern anklicken....

Ich hatte das gemeint und nicht:

Du sprichst wohl vom ersten deplatzierten <hr>-Element im IE8.

Zum Vergrößern anklicken....

Ich glaube einfach, ich werde mich noch ein wenig in CSS einarbeiten müssen bevor ich das in Angriff nehme.

Danke aber trotzdem. Jetzt habe ich dank dir entsprechende Anhaltspunkte die ich nur noch versuchen muss umzuarbeiten.

Greetings, Scharri

So meine Lieben,

habe das Problem jetzt gelöst:
in meiner "layout.css" war eine Ziele mit: f/loat: left;

Dieses habe ich mit /*f\loat: left;*/ ausgeklammert / deaktiviert.

Nun tut das auch im IE.

Greetings, Scharri

Der Fehler liegt oft im Detail.

mfg Maik