Design wird im IE anders angezeigt (falsch), als bei Firefox


  • elhamd
  • 2235 Aufrufe 18 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Design wird im IE anders angezeigt (falsch), als bei Firefox

    Hallo alle zusammen.
    Mein Design (umut-test-seite - Home) wird leide im Internet Explorer nicht richtig angezeigt.
    Ich habe bereits im Forum von Homepage-Baukasten, da habe ich die Seite erstellt, nachgefragt, aber konnte keine hilfreiche Antwort erhalten.

    Dies sind die Themen (Probleme):

    1. Hintergrundbild im content für IE fixieren
    Dieses Problem ist gelöst.

    2. Zwei Klassen werden im IE (nach rechts) verschoben angezeigt
    Die Klassen: "footer" & "Navi" sind zu weit rechts, aber die Klassen "Header_oben" & "content" werden richtig angezeigt.
    Ich kann keinen Fehler im Quellcode entdecken.

    Hier der Coder zu den Klassen:
    #Header_oben {height: 100px; width: 900px; background:white; background-image: url(url); position:absolute; top:30px;}

    #footer {height: 30px; width: 898px;background-image: url(hxxp://80.190.202.79/pic/u/umut-test-seite2/background_footer.png); position:absolute; top:650px;border: 1px solid #000000;}

    #Navi {height: 35px; width: 900px; background-image: url(hxxp://80.190.202.79/pic/u/umut-test-seite2/navigation_htg.png);position:absolute; z-index:1; top: 100px;}


    3. Unterpunkte von Drop-Down-Menü lassen sich im IE nicht anklicken

    4. Ich hätte gerne, dass die Schrift im footer mittig angezeigt wird. In Firefox wird sie zu weit unten und im IE wird sie zu weit oben angezeigt.
    Dieses Problem ist ebenfalls gelöst.



    Ich bauche dringendst Hilfe.

    Was hilfreich sein könnte ist folgendes Addon für Firefox: "Aardvark". Es ist bei: "addons.mozilla.org" zu kiregen.
    Damit lassen sich Klassen, Tabellen usw. identifizieren.

    Ich danke euch im Voraus.

  • Zu Problem 1:
    Das Problem besteht aber wohl nur bis IE6?:confused:
    Dieser unterstützt den Wert nur im body-Tag!
    Beim IE7 sollte es aber funktionieren?!

    Zu Problem 2:
    Beim Footer stimme ich dir zu (IE6), dieser ist tatsächlich zu weit rechts.
    Beim Navi ist es ja nur der Hintergrund.;)

    Das ganze liese sich aber bestimmt per CSS mittels display lösen.
    Lerne selber noch, also bitte um Verständnis falls falsch.:rolleyes:

    Zu Problem 3:
    Im Firefox (aktuelle Version) kann ich auch keinen Unterpunkt aus dem Drop-Down-Menü anklicken.
    Kann sein weil Navigationspunkte sind nicht verlinkt?:confused

    Zu Problem 4:
    Mittels padding sollte auch dies machbar sein.;)

    PS: Bitte um Rückmeldung!:)

  • Linux-Daemon schrieb:


    Beim IE7 sollte es aber funktionieren?!

    Nein, tut es leider nicht. Lad dir doch einfach IE7, und schau mal.

    Linux-Daemon schrieb:

    Das ganze liese sich aber bestimmt per CSS mittels display lösen.

    Wie denn?

    Zu Problem 3:
    Mit anklicken ist gemeint, dass im IE 7, die Unterpunkte verschwinden, sobald man mit der Maus drüber ist. In Firefox kann man problemlos drüber, ohne dass die wieder verschwinden.

    Linux-Daemon schrieb:

    Zu Problem 4:
    Mittels padding sollte auch dies machbar sein.;)

    Ich habe es nicht geschafft, denn wenn ich z.B. "padding-bottom: 5px" einstelle, ist es bei Firefox okay, aber dann bei Internet Explorer zu hoch, bei dem es ohne padding bereits zu hoch ist.

  • Also IE7 kann ich bei mir nicht installieren da ich kein XP habe.:rolleyes:

    Das mit display...... da hast du irgendwo im Code folgendes stehen:

    Quellcode

    1. #footer

    Evtl. da display: block hinzufügen?!:confused:

    Quellcode

    1. #footer {height: 30px; width: 898px; [b]display:block;[/b] background-image: url(http://80.190.202.79/pic/u/umut-test-seite2/background_footer.png); position:absolute; top: 680px; border: 1px solid #000000;}


    Zu 4:
    Probiers mal mit padding und einem Wert - nicht padding-bottom, padding-top etc. sondern einfach nur padding.
    Beispiel:

    Quellcode

    1. padding: 5px;

    Deine Schriftgröße im Footer sind 13px, dein Hintergrundbild im Footer ist 30px hoch - folglich mit padding: 5px; sollte er es so berechnen:
    5px von oben und unten sowie rechts und links (=30px gesamt - 5px oben und 5px unten), bleiben 20px übrig, schriftgröße 13px abziehen (=20-13) bleiben 7px für alle Seiten (insgesamt) übrig.

    Geht es nicht auf, weil ja 7px ungerade ist, dann kannst du evtl. die Schriftgröße ändern oder aber die Höhe des Hintergrundbildes im footer.;)

    Andernfalls mit text-align: center; (nur bei Blockelementen zulässig!) einmal probieren.;)
    Ob dies allerdings auch die Abstände für oben und unten berücksichtigt.... :rolleyes:

  • Zu 4:

    Setz dir hier einfach ein line-height: 30px; (entspricht der Höhe des BG), dann haste deine Schrift vertikal zentriert ausgerichtet. Padding würd ich nicht verwenden, da, wie bereits gemerkt, es fast immer zu Darstellungsproblemen kommt.

    Zu 1:

    Was bitte möchtest du denn? Ich versteh dein Problem nicht ganz?! Du hast ein Hintergrundbild, welches größer ist als das umgebende Element und du möchtest, dass das Bild immer an einer Stelle bleibt, wenn sich z.B.die Größe des umgebenden Elements verändert????!!!! Soll sich das Bild wiederholen oder nicht!

    Ansonsten:

    background: url(blabla.png) left no-repeat;


    Bahnhof. Du musst die Fragen verständlicher formulieren. Nur dann kann dir geholfen werden!!!

    Zum Rest kann ich nix sagen, habs mir net angeschaut.

    Wenn du nicht weiterkommst, schau ichs mir aber gern nochmal an.

    Am besten wäre es natürlich, nen Link zur Seite mal zu posten (kannste ja dann gleich wieder rausnehmen, aber mir jetzt extra nen Prog zu öffnen und die ganzen Sachen dort reinzukopieren um zu schauen wie es denn ausschaut, naja)

    Gruß THOMO

  • In der Klasse #footer musst du ein line-height: 30px; setzen

    In den Klassen #footer und #Navi fehlt ein margin:auto;

    Das Hintergrundbild ist einfach nur zu klein. Nimm eines was größer ist, dann passts. oder du verzichtest auf den Verlaufs-Effekt und nimmst stattdessen eine Grafik, die sich beliebig oft wiederholen kann und es dennoch gut aussieht.

    Das Menue lässt sich auch im IE7 anklicken, du musst nur die Maus sehr schnell nach unten bewegen. Dürfte nur eine kleine JavaScript Einstellung sein. Mal die entsprechende JS-Datei hier posten.

    Im Übrigen rate ich dir, deine Sites nicht mittels Frames zu strukturieren sondern ganz "normal".


    Gruß THOMO

  • Ich habe den Code so geändert, wie du es gesagt hast, aber es hat sich nicht getan, nur folgendes:

    Aber sieh selbst:
    80.190.202.79/pic/u/umut-test-seite2/line-height_30.jpg

    Die Schrift im footer wird mit deinem Code noch schlimmer angezeigt, desshalb hatte ich es wieder entfernt.


    Im Übrigen rate ich dir, deine Sites nicht mittels Frames zu struktureren sondern ganz "normal".

    Was meinst du eigentlich mit Normal?

    Zu dem Rest schreibe ich dir eine PN.

  • Denkst du wirklich, dass Leute die den IE nutzen sich den FF deshalb installieren?
    Eher verlassen sie die Seite (wenn sie nicht korrekt angezeigt wird)!

    Wenn das mit dem footer jetzt aber noch das einzigste Problem ist....:rolleyes:
    Gib doch mal Rückmeldung ob nicht doch schon gelöst.;)
    Kann dir da aber nicht helfen.:(

  • zockerkid @ elhamd

    zu deinem problem 2:

    bei deinen a-tags der hauptmenupunkte (z.b. "MENÜ 01") ist die angegebene css-klasse "qmparent" nicht definiert. vielleicht liegt's daran?

    zu 3:

    dieses problem liegt wahrscheinlich auch an der fehlenden css-klasse. wenn du in den haupt-menüzeilen bei dem a-tags ein style="height:100%;" hinzufügst, kannst du im IE auch die untermenüpunkte anwählen. also

    HTML-Quellcode

    1. <li><a class="qmparent" href="javascript:void(0)">MENÜ 01</a>

    ändern in

    HTML-Quellcode

    1. <li><a class="qmparent" href="javascript:void(0)" style="height:100%;"">MENÜ 01</a>


    dann klappt es.

    bye,
    zockerkid

  • Die Änderungen von zockerkid hab ich im Quelltext noch nicht finden können, aber im IE7 läuft soweit alles korrekt. (2) kann ich auch im IE6 nicht reproduzieren, zu (3): Im IE6 funktioniert das Untermenü bei mir gar nicht, wird gar nicht angezeigt. IE6 gibt in diesem Zusammenhang auch eine Fehlermeldung aus: "Zeile 519; Zeichen 1; Fehler: Objekt erwartet."

    Ich würde btw Klassen immer mit einem zusammenhängenden Namen benennen.

  • Also irgendwie habe ich überhaupt keine Probleme bei deiner Seite. Das einzige, das auffällt, ist die kleine "..., es sind Fehler auf der Seite aufgetreten Meldung" im IE7.
    Und ich habe 4 Warnungen in der Fehlerconsole des FF (neuste Version):



    Hast du mal nen Screen von den ungelösten Problemen?