IE verhunzt Seite.

[Webby]

Hallo Forum,

könnte mir jemand bei einigen Internet Explorer Problemen helfen ?
Mit den anderen Browsern wie Netscape, Mozilla, Opera sieht die Seite so aus, wie sie entworfen wurde.

Nur der IE verhunzt mir wieder mal alles. Könnte mir jemand bei der Korrektur helfen? Ich schaffe es einfach nicht. Wie man sieht wird im IE nach dem Kopf der Body nach unten gedrückt und die Ecken sind sichtbar. Keine Ahnung warum.

http://217.160.40.241/_test/pages/shop_overview.php?cat_id=1

User: test
Pass: testtest

Möchte nicht, dass diese Seite gespeidert wird und die Kunden evtl. drauf stoßen. ;)

Danke

[Gregor]

Hallo Webby

style = "float ... " habe ich noch nie verwendet. Das halte ich also für gewagt. Ich hätte auch eher nicht DIVs geschachtelt sondern die guten, alten Tabellen verwendet. Aber vielleicht bin ich ja bloß konservativ ...

Nebenbei: DIVs haben in MSIE immer eine Breite von 100%, wenn nicht anders angegeben. Also, wenn links oder rechts von dem, was in der DIV ist, was stehen soll, ist eine Tabelle die bessere Wahl!

Was macht float:left; eigentlich? ist es das gleiche wie align="left", was bisher bei mir immer problemlos geklappt hat (align bezieht sich bei DIVs bekanntermaßen auf ihren Inhalt - so wie bei TDs)?

Was mir auf jeden Fall aufgefallen ist: wenn Du keinen Whitespace um ein Bild willst, darf auch keiner da sein: keine Umbrüche und keine Leerzeichen!

Also: Bilder, die an Ränder (DIV-Ränder / Tabellenzellen) grenzen sollen, haben entweder ein align=irgendwas und ggf. sogar vspace/hspace=0 oder der IMG-Tag schließt sich gleich an den öffnenden Tag des Parent-Elements an, also etwa so:

<div class="col2"><img
src="../images/design/edge_red_top_left.png" alt=""></div>

pngs sind übrigens derzeit auch noch nicht so opportun! Für Dein Design ist auch der einzige echte Vorteil von pngs - der Alpha-Channel - gar nicht erforderlich!

Wenn ein Bild ganz links und eins ganz rechts sein soll, würde ich auch wieder align="left/right" verwenden (statt der Stilangabe).

Außerdem solltest Du bedenken: Whitespace (s.o.) vor dem ersten Tag ist Text, der VOR dem Bid eingefügt wird. Das kann z.B. bei align="left" so aussehen, dass erst eine Leerzeile kommt, und dann erst das Bild am linken Rand, weil der umfließende Text immer erst NACH dem IMG-Tag steht!

IM IMG-Tag kannst Du dann ruhig einen Umbruch plazieren!

Einfache BRs durch die Verwendung von DIV-Tags zu substituieren ist auch nicht unbedingt zu empfehlen, wenn es auch unkritisch ist.

Woher der große Abstand zwischen oberem roten Bereich und und Unten links kommt, müßte ich per Experiment ermitteln, aber ich tippe auf die unnötige DIV "header_outer" und den zusätzlichen Whitespace darin.

Naja. Viel Glück noch beim Basteln.

Gregor

[MudGuard]

Hi,

style = "float ... " habe ich noch nie verwendet. Das halte ich also für gewagt.

Weil DU etwas noch nie getan hast, ist es gewagt?

Nebenbei: DIVs haben in MSIE immer eine Breite von 100%, wenn nicht anders angegeben. Also, wenn links oder rechts von dem, was in der DIV ist, was stehen soll, ist eine Tabelle die bessere Wahl!

Eine Tabelle ist für tabellarische Daten.

Was macht float:left; eigentlich?

Du hast es noch nicht benutzt, hast keine Ahnung, was es ist und hältst es für gewagt? Wird ja immer besser ...

<div class="col2"><img
src="../images/design/edge_red_top_left.png" alt=""></div>
pngs sind übrigens derzeit auch noch nicht so opportun!

Aha. Wenn Du png mit Alpha-Channel gesagt hättest, könnte man ggf. noch zustimmen.

Für Dein Design ist auch der einzige echte Vorteil von pngs - der Alpha-Channel - gar nicht erforderlich!

Wie kommst Du darauf, daß der einzige Vorteil von pngs der Alpha Channel sei?
Es gibt eine ganze Reihe weiterer Vorteile (kommt natürlich immer darauf an, worauf man das bezieht).
Z.B. hat ein png im Vergleich zum gif fast immer eine geringere Dateigröße.
Oder im Vergleich zu jpg verlustfreie Komprimierung.

Wenn ein Bild ganz links und eins ganz rechts sein soll, würde ich auch wieder align="left/right" verwenden (statt der Stilangabe).

Schon mal von "Trennung von Struktur und Darstellung" gehört?

cu,
Andreas

[Webby]

Hallo,

Erst mal Danke für den Beitrag und das viele Schreiben.
Ich bleibe aber lieber bei den DIVs. Auf Tabellen möchte ich beim Design nicht zurück. Ist nicht Standard und auch zu unübersichtlich.

Woher der große Abstand zwischen oberem roten Bereich und und Unten links kommt, müßte ich per Experiment ermitteln, aber ich tippe auf die unnötige DIV "header_outer" und den zusätzlichen Whitespace darin.

Wenn ich das wüsste. Habe nun schon einige Tage nach dem "Fehler" gesucht. Scheint ja eigentlich keiner zu sein, da die Seite in den anderen Browsern normal dargstellt wird. Aber ich kann die Seite ja nicht ins Netz stellen, wenn sie im IE aussieht wie Müll.

Danke

[Webby]

Habe nun einen Ansatzpunkt gefunden.
Auf den nicht-deutschen Seiten besteht das Problem auch im Mozilla.
Habe aber keinen blassen Schimmer wo genau.

[Webby]

Also ich habe folgende Zeile rausgenommen:

<div id="header_outer">

Nun ist die Zeile Weg. Aber was ist mit den Rundungen ?
Da habe ich so einen weißen Strich im IE daneben.
Bekomme den einfach nicht weg.

Wer kann helfen ? Danke