[CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

[sunny_76m]

Hallo Zusammen!

Ich hab ein Problem mit dem ich hoffentlich nicht alleine da stehe - allerdings hoffe ich, dass ich es hier jemanden gibt, der evtl. die passende Lösung kennt und mit mir teilt:

Also, ich habe mit Photoshop CS3 eine Homepage aufgebaut und gesliced. Soweit alles wunderbar.

Ich weiß, dass der Code aus Photoshop heraus nicht sooo sauber ist, da ich aber im Bereich Web noch relativ am Anfang stehe, sei das mal so als gegeben angenommen.

So, nun bastel ich mit Dreamwever CS3 eben am Inhalt der Seite und muss aber feststellen, dass z.B Firefox oder auch Safari die Seite einwandfrei so anzeigen, wie ich das auch will.
Sobald die Seite mit dem Internet Explorer angezeigt wird, dann verschieben sich einzelne Slices so dass dann der Hintergrund durchscheint.

Bild aus Firefox




Bild aus Internet Explorer



Die problematischen Stellen sind rot umrandet, das sind teils ganz schöne Blöcke bei denen der Hintergrund frei und der eigentliche Bildaufbau verschoben wird.

Nun kann man über Sinn und Unsinn des Internet Explorers streiten - ich selbst verwende ihn NICHT. Allerdings habe ich hier eben Leute, die unbedingt den Microsoft-Browser verwenden wollen.


Vielen herzlichen Dank euch schon mal - ich hoffe auf gute Antworten, die zu einer lösung führen!

 

[sokie]

AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

Dass man den IE natürlich berücksichtigen muss ist auch keine Frage.
Ich hoffe, dass dir da jemand so "aus der Hüfte" helfen kann. Eigentlich ist für eine Antwort der code der Seite mitsamt css wichtig, noch einfacher wäre ein link zur Seite,so wie sie sich im moment darstellt.

 

[Flosse]

AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

Sehr häufig stimmen Abstände nicht, da der IE Boxen anders berechnet, als die genannten anderen Browser. An manchen Stellen kommt der IE auch mit einem padding (Innenabstand) nicht zurecht.

Also mit unterschiedlichen Abständen mal ausprobieren.

 

[sunny_76m]

AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

ok, dann geb ich euch mal die Webadresse....



Ich hoffe ihr vierteilt mich nicht gleich wegen der - vermutlich mehr als unsauberen - Programmierung.

Hoffe es kann jemand dabei helfen WO hier zu drehen ist, dass auch der Internet Explorer die Anzeige auf die Reihe kriegt.

 

[anoX]

AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

Ja .. willkommen in der Welt der Webdesigner. ^^

Warum IE und Co verschiedene Sprachen sprechen kann ich bis heute nicht wirklich nachvollziehen, aber was soll's.

Wäre sonst auch echt zu langweilig, wenn alles gleich funktionieren würde. :muede:

Also denn. Wie schon von einigen erwähnt, interpretiert der IE gewisse Abstände anders als der FF & Co und umgekehrt. Nehmen wir bei dir z.B. den DIV

#index2-05_

(die Linie unter dem Logo).

Der Code lautet:

#index2-05_ {
    position:absolute;
    left:72px;
    top:65px;
    width:313px;
    height:14px;
}

Die absolute Positionierung wird vom IE also nun anders interpretiert. Um dem Abhilfe zu schaffen, hilft bei dem DIV z.B. folgender "Hack":

*:first-child+html #index2-05_ { top:64px; }

Hacks werden nicht gern gesehen und von mir persönlich auch ungern genutzt, aber manchmal kommt man nicht drum herum. Allerdings sind viele - insbesondere deine - nicht nötig, wenn eine valide CSS-basierte Programmierung gegeben ist.

Der o.g. Hack gilt NUR für den IE7 und ggfl. höher (also IE8 - nicht getestet). Du müsstest nun für alle anderen Divs, die im IE "falsch" dargestellt werden ebenfalls diesen Hack einbauen und die Höhe, also das "top" entsprechend verändern.

Der fertige Code sähe dann so aus:

#index2-05_ {
    position:absolute;
    left:72px;
    top:65px;
    width:313px;
    height:14px;
}

 *:first-child+html #index2-05_ { top:64px; }

Ich weiß, dass Du vermutlich stolz drauf bist, dass die Seite an sich schon fertig aussieht und Du so weit gekommen bist. Ich rate dir jedoch, dich mit CSS zu befassen und selber(!) die Grafiken für die Programmierung vorzubereiten. Aus Erfahrung kann ich dir sagen, dass Du irgendwann nicht drum herum kommst, weil Du dich weiterentwickeln möchtest und irgendwann einsiehst, dass das automatische Slicen so seine Tücken hat. Siehst Du ja jetzt.

Der Fehler liegt im Prinzip daran, dass die Slices unterschiedlich hoch sind, Du viel zu viele einzelne - oft unnötige - Bilder hast und demnach viel positionieren musst.

Dabei kämst Du mit nur 5 (FÜNF) Grafiken vollkommen aus! Hier habe ich dir mal gezeigt, wo es sinnvoll wäre zu slicen:



[img=http://img20.imageshack.us/img20/7360/64254446.th.jpg]

-> Grafik 1: Top mit dem Logo und OHNE den Kontaktdaten!

Die Kontaktdaten sollten zu markieren sein. Außerdem machst Du so den Suchmaschinen keine Freude, bzw. dem Kunden, da quasi kein Text auf der Seite ist, der ausgelesen werden kann. Das Ergebnis wäre also ein mehr als schlechter Platz bei den gängigen Suchmaschinen. Infos müssen mühsam abgeschrieben werden etc. pp.

-> Grafik 2 & 3 für den Navigationsbereich. Nimm EINE Grafik für die Navigation. Die Button kannst Du hinterher mit Hilfe von CSS so schieben, dass sie passend drüber liegen. Für den hover-Effekt ebenfalls EINE Grafik nutzen. Wie das genau funktioniert, erkläre ich gerne, wenn's so weit ist.

-> Grafik 4 für den Contentbereich. Hier hast Du das Wasserzeichen drin. Auch hier: lass den Text Text sein!

-> Grafik 5 (muss nicht) für den Footer. Die Button kannst Du als Text darstellen. Hier sind eigentlich keine Grafiken nötig. Die Linie kannst Du mit Hilfe von CSS darstellen - muss aber nicht.

Wie Du siehst, kämst Du mit 4-5 Grafiken für das Layout aus. Wichtig hierbei: nimm JPG - kein PNG. PNG werden vom IE6 nicht interpretiert. Dafür ist wieder ein "Hack" nötig, damit der IE versteht, was Du von ihm willst. Da Du keine Transparenz benötigst, ist es kein Problem auf .jpg umzusteigen und diese zu verwenden.

Mein Rat: Mache die Seite so fertig - mit Hilfe von ImageReady. Anschließend beginne, die Seite komplett selbstständig umzusetzen. Schneide die Grafiken selbst. Arbeite mit CSS. Baue einen schlanken und validen Code. So hast Du einen vorher - nachher - Vergleich und siehst, wie es im Endeffekt aussehen soll.

Ich hoffe, ich konnte dir ein wenig helfen. Bleib am Ball und bei Fragen einfach Fragen.

 

[sunny_76m]

AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite

@anoX
wow... erst mal vielen Dank für deine Hilfe... ich glaube da hab ich Einiges an Arbeit vor mir. Aber wie du schon richtig geschrieben hast... man will sich ja verbessern.

Also werde ich mich an die Arbeit machen... und sicher wieder mit dem ein- oder anderem Problem wieder kommen.