Div-Construkt: IE zeigt zuviel Abstand an

[belimo]

Hallo Leute

Folgende Seite: www.hotelgutschein.ch/traumprojekt/index.php

Folgendes Problem: Darstellungsunterschied FF/IE, wobei FF richtig anzeigt.

Der Code ist ganz einfach und kurz, trotzdem weiss ich nicht, was falsch ist. Zur Erklärung: der graue Balken mit dem Schriftzug air-shop.ch ist ein 2000px breites Bild.

Könnt ihr mir weiterhelfen?

[hero-master]

HI belimo,
ich tippe mal darauf, dass es an dem schließenden p-Tag liegt, den du nach der Sprachwahl eingeügt hast, aber ihn nicht geöffnet hast
pack den mal weg und schaus dir nochmal im IE an

[belimo]

habe ich grad geändert. Leider bringt das nichts... Hast du noch ein Tipp

Dankeschön!

[hero-master]

Zitat von belimo

Hast du noch ein Tipp

Verpass dem Bild ein display:block, der IE lässt gerne Platz für die Unterlänge von Buchstaben, also für p,q,j, etc

[belimo]

Mann o Mann, du bist gut! So geht's.

Wenn ich aber grad den Experten am Draht hab noch eine Zusatzfrage:

Ich habe den Text "Bitte wählen Sie ihre Sprache" mit einem p-Tag umrahmt. Nun schieben beide Browser den ganzen Abschnitt runter. Klar, der Text soll ja runtergeschoben werden, aber das Hintergrundbild des div "bottom" soll doch an den grauen Balken angrenzen.

(Dieser Efffekt tritt im FF und im IE auf, und ich nerve mich immer wieder an diesem Effekt.) Weisst du da grad was? Danke!

[satre]

Eventuell so:

<p style="margin-top:0;">

oder

<p style="margin:0;">

[hero-master]

Zitat von belimo

Ich habe den Text "Bitte wählen Sie ihre Sprache" mit einem p-Tag umrahmt. Nun schieben beide Browser den ganzen Abschnitt runter. Klar, der Text soll ja runtergeschoben werden, aber das Hintergrundbild des div "bottom" soll doch an den grauen Balken angrenzen.

Einige Blockelemente haben vordefinierte Außen- und Innenabstände. So auch der p-Tag. Setz am Besten mal global alle Abstände auf 0 und definier für jedes Element indiviuell die Abstände:

* {
margin:0;
padding:0;
border:0
}

Jetzt gibst du dem p-Tag einfach ein padding-top mit, wenn du dem Text einen Abstand nach oben geben willst, aber das Huintergrundbild sich nicht vom Fleck rühren soll

Edit:
Pff satre, ich red mir hier den Wolf und du gibst die Antwort in einem Satz

[belimo]

Nein, wie gesagt, soll der Text ja schon heruntergezogen werden. Das ist ja der Sinn des p-Tags. Nur das Hintergrundbild soll an Ort und Stelle (also direkt am grauen Balken) sein.

Ich verstehe nicht, warum das p-Tag überhaupt Auswirkungen auf das per CSS eingebundene Hintergrundbild hat.

(Es handelt sich um das Hintergrundbild im div "bottom")

EDIT

Habe das jetzt getestet: Aber genau dieses margin-top verschiebt ja das Hintergrundbild. Oder hab ich jetzt was übersehen?
www.hotelgutschein.ch/traumprojekt/css/style.css

[belimo]

dass ihr nochmals ein E-Mail bekommt

[hero-master]

Zitat von belimo

dass ihr nochmals ein E-Mail bekommt

Haste mal mein Post gelesen?
http://www.traum-projekt.com/forum/664849-beitrag7.html

[isa]

edit: ach nich gesehn, lösung steht ja schon da
Würde dem #bottom-Element noch ein height:80px spenideren

[belimo]

ach du Schande

Ja habe ich aber viel viel viel zu oberflächlich.

"global" habe ich überlesen, statt * sah ich ein p, und statt margin padding.

Unglaublich (So gehts wenn man drei Dinge gleichzeitig machen will )

Aber danke, so gehts wunderbar

[satre]

Du solltest aber im Hinterkopf behalten, dass sämtliche Blockelemente wie z.B <h>-Überschriften und Listen jetzt keine Abstände mehr haben.

Diese müsstest du wieder in CSS formatieren.

[belimo]

danke für den Hinweis