XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Anzeige in Netscape 4.78 und IE5 (http://xhtmlforum.de/showthread.php?t=42775)

MoJo 03.11.2006 15:23

Anzeige in Netscape 4.78 und IE5
 
Hallo,

ich habe zwei Probleme mit meiner Homepage.

1.
Netscape zeigt die Seite ganz komplett falsch an, ich hab aber keine Ahnung warum. Ich bin auf den Fehler gestoßen, als ich mir die Homepage mit BrowserCam angeschaut habe, wobei (abgesehen von meinem zweiten Problem) die Anzeige bei den verschiedenen Browsern und Betriebssystemen ok war. Ich hab jetzt mal versucht warum das Layout so zerschossen ist, bin aber auf keine Lösung gekommen.

2.
Der IE5.0 und IE5.5 zeigt das Logo im Header falsch an: Beim Überschneiden mit dem links vom Header liegenden div rutscht das Logo in den Hintergrund, also hinter den linken div, der linke Teil des Logos wird also nicht angezeigt. Außerdem verschiebt sich der div "content" nach links. Auch hier weiß ich nicht warum. :cry:

Nun noch zu meiner Homepage:
Kunstschmiede Heinecker Home
CSS

Die Homepage habe ich ausführlich mit XP mit IE6, Firefox1.5, Netscape7.1, Opera 9 getestet. Ansonsten würde ich behaupten, dass auch die andren Betriebssysteme und Browser größtenteils funktionierten (habe ich eben bei BrowserCam mit 200Captures gesehn :mrgreen: )...bis auf meine 2 probleme halt.
Da ich natürlich noch nicht alle Browser getestet habe gibts hier ein Bild, wie sie normal aussieht.

...und noch ein Bild zu meinem ersten Problem (leicht nach links gescrollt, weil das sonst nicht mal bei meinem 19Zoll-Bildschirm draufpasst) und zum zweiten Problem.

Ok, ich glaub jetzt hab ich alles...

Schon mal Danke für Lösungsvorschläge!

Gruß

mazzo 03.11.2006 15:32

Der inzwischen superselten gewordene Netscape 4.x sollte CSS am besten gar nicht erhalten und somit nur den puren HTMLCode darstellen. Anpassungen sind mit CSS kaum zu schaffen, eher mit HTML3.2...

Die 5er IEs wiederum sind noch etwas häufiger vorhanden und lassen sich durch ConditionalComments mit eigenen CSS-Dateien versehen, die nur für diesen Browser bestimmte CSS-Angaben überschrieben. Stichwort Quirksmodus und damit falsch interpretiertes Boxmodell.

MoJo 03.11.2006 17:54

wie schaffe ich es denn, dass netscape 4.x kein css mehr erhält?

was muss ich denn in die conditional comments noch reinschreiben? ich hab ja im head des dokuments ja schon folgendes drin:
Code:

<!--[if lt IE 7]>
<style type="text/css">
#header {height: expression(this.scrollHeight > 130 ? "130px" : "auto"); overflow: hidden;}
#content {height: 400px; padding: 10px;}
#navigation li a {height: 0.01em;}
.listing dd {height: 1%;}
</style>
<![endif]-->

...für alles bis IE7. Was muss ich da jetzt noch für den 5er reinschreiben?

und noch eine frage: warum eigentlich quirks mode? ich habe doch eine dtd:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

die auch der IE interpretieren sollte (weil nichts davor steht) also dürfte er nicht in den quirks mode fallen, oder?

mazzo 03.11.2006 18:17

Google sagt zum Verstecken von CSS beim Netscape: CSS vor Netscape 4 verstecken - (FAQ von tiptom.ch)


Wenn Du schon CCs für den IE benutzt, musst Du keine weiteren schreiben. Das dort verlinkte oder hineingeschriebene CSS wird nur bei den IEs angewendet, für die die Bedingung des CC gilt.

Ob sich Dein Brwoser im Quirksmode befindet kannst Du ja schnell testen, wenn Du den Verdacht hast. Einfach eine Box mit fester Breite, padding und Rahmen definieren und schauen ob die Werte addiert oder verrechnet werden.

MoJo 03.11.2006 18:35

ok, das mit dem CSS für den Netscape4.x sollte klappen.

aber was ist denn mit meinem zweiten problem mit dem IE. Ich hab mal gegoogelt und ein bisschen rumprobiert, ich werd aber nicht wirklich schlauer. wie die conditional comments funktionierten, weiß ich. aber was muss ich für den IE5 denn konkret bei meiner Homepage reinschreiben? Ich blick da nicht ganz durch.

Zitat:

Stichwort Quirksmodus und damit falsch interpretiertes Boxmodell.
Wie hast du das gemeint? Warum Quriksmodus?

fricca 03.11.2006 19:09

Zitat:

Zitat von MoJo (Beitrag 313628)
aber was muss ich für den IE5 denn konkret bei meiner Homepage reinschreiben?

Überall dort, wo height/width und ein gleichgerichtetes padding/border aufeinandertreffen, stimmt die Boxgröße im IE5 nicht. Das musst du ausgleichen.
Google: Box-Model-Bug

Zitat:

Wie hast du das gemeint? Warum Quriksmodus?
Der IE5 ist immer im Quirksmodus.

MoJo 04.11.2006 14:00

Zitat:

Zitat von fricca (Beitrag 313634)
Überall dort, wo height/width und ein gleichgerichtetes padding/border aufeinandertreffen, stimmt die Boxgröße im IE5 nicht. Das musst du ausgleichen.
Google: Box-Model-Bug

Ok, das war beim #navigation und beim #content der Fall. Das hab ich jetzt mit einem Conditional Comment für lower than IE6 ausgebessert.

Die Navi stimmt aber immer noch nicht. Im Vergleich zu den restlichen Browsern ist links ein ca. 30px breiter Rand, den ich nicht wegbekomme, die Navi-Punkte sind also eingerückt (normal wären 10px, beim IE sind das aber viel mehr). Ich hab mal für #navi padding, margin und text-indent alles auf 0 gesetzt (auch mit !important), das hat aber nichts geholfen. Besonders deutlich wirds bei den Unterkapiteln (zB Produkte, da stimmts überhaupti nicht mit Firefox, Opera etc. überein!) Warum ist da ein Rand und wie bekomme ich den weg?

Was auch noch nicht klappt, ist das mit dem Logo. Das ist dort, wo es sich überschneidet nicht sichtbar, ich weiß aber nicht warum.
Vielleicht liegt es an folgendem: ich habe für den header ein max-heigt festgelegt, für den IE dann folgendes:

Code:

#header {height: expression(this.scrollHeight > 130 ? "130px" : "auto"); overflow: hidden;}
Wie bekomme ich das Logo sichtbar und die Navi gscheit hin? Bei den andren Browsern und bei IE6 funktionierts ja!!!

fricca 04.11.2006 14:40

Zitat:

Zitat von MoJo (Beitrag 313686)
Die Navi stimmt aber immer noch nicht. Im Vergleich zu den restlichen Browsern ist links ein ca. 30px breiter Rand,

Du sprichst vom IE5, ja? Der IE6 zeigt bei mir das Problem nicht.
Diese komische auto-Einrückung müsstest du mit einem float:left für die Listenpunkte wegbekommen.

[Dieses Problem stellt sich übrigens nicht, wenn du das ul-Element in einem eigentlich unnötigen div einschließt und dieses floatest. Ich nehme an, das hattest du ursprünglich mal, denn in deinem Stylesheet gibt es etliche #navigation ul -- dazu passt kein Element deines Dokuments! edit: Ich nehm alles zurück und behaupte das Gegenteil ;) -- auf den Subseiten gibt's ja noch Untermenüs ...]


Zitat:

Was auch noch nicht klappt, ist das mit dem Logo. Das ist dort, wo es sich überschneidet nicht sichtbar, ich weiß aber nicht warum.
Wegen overflow:hidden.

Zitat:

Vielleicht liegt es an folgendem: ich habe für den header ein max-heigt festgelegt, für den IE dann folgendes:

Code:

#header {height: expression(this.scrollHeight > 130 ? "130px" : "auto"); overflow: hidden;}

Unnötig umständlich.
Wirf dein leeres space-div raus, gib dem header einen breiten border-left und die passende Höhe.
Das Bild positionier absolut. Du brauchst kein float und kein overflow und auch kein max-height.

Das Bild sieht übrigens grausam aus. Wenn du ein transparentes gif auf braun stehen haben willst, dann stell es bitte auch auf einem passenden Hintergrund frei.
Im Photoshop kannst du den Hintergrund noch beim Speichern auswählen.

MoJo 04.11.2006 16:29

Also, das mit dem float:left für die #navigation li in das ConditionalComment hat geklappt.

Auch das mit dem Logo geht, eine super Idee (ich hab immer überlegt wie ich den überflüssigen space-div rauskriegen kann und trotzdem ne andre farbe da links haben kann - so geht das natürlich super!).

Zitat:

Das Bild sieht übrigens grausam aus. Wenn du ein transparentes gif auf braun stehen haben willst, dann stell es bitte auch auf einem passenden Hintergrund frei.
Im Photoshop kannst du den Hintergrund noch beim Speichern auswählen.
Wie meinst du das denn? Meinst du die weißen "Flecken"? Die muss ich noch weg machen, das weiß ich. Aber was du sagst, das mit dem passenden Hintergrund, das versteh ich irgendwie nicht ganz. Kannst du das vll noch mal erklären.

...und dann hab ich jetzt noch ein weiteres Problem. Der IE5.01 zeigt jetzt die Navi falsch an. Die navi-punkte, die ein untermenü haben, werden, wennn man sie anklickt und die seite dann fertig geladen ist nicht mit dem normal üblichen hintergrund über die gesamte breite angezeigt. Der Hintergrund ist nur auf der Breite des Schriftzuges zu sehen. Wenn man die Seite dann aktualisiert, dann ist der Hintergrund auf der ganzen Breite zu sehen!?! Ich hab jetzt die aktuelle version hochgeladen, zum anschaun.

Warum ist das so komisch?

mazzo 04.11.2006 16:37

Zitat:

Zitat von MoJo (Beitrag 313694)
...und dann hab ich jetzt noch ein weiteres Problem. Der IE5.01 zeigt jetzt die Navi falsch an. Die navi-punkte, die ein untermenü haben, werden, wennn man sie anklickt und die seite dann fertig geladen ist nicht mit dem normal üblichen hintergrund über die gesamte breite angezeigt.

Schau mal in den FAQ-Thread in Heikos Beitrag. Da wird ausführlich erklärt wie das zu handhaben ist.

Zur Transparenz in Photoshop: Du kannst beim "Für Web speichern" für GIFs Einstellen welche Hintergrundfarbe transparent sein soll. Sollte dies standardmäßig weiss sein, stell es auf den braunton um, den Du benutzt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023