Hallo zusammen,

habe eine Website mit HTML & CSS für einen Kunden aufgebaut. Komme nun bei folgenden Problemen leider nicht weiter. Vielleicht könnt ihr mir ein paar Tipps geben?

Vorübergehender Link zum reinschauen:
http://www.trueprojects.com/test55/index.html

1) Firefox 2
Zeigt die Website eigentlich genau so an, wie ich es mir vorstelle. Variabel Breite mit min & max Werten, Floaten tuts auch soweit richtig, nur Problem: Wird die Seite aus dem Internet (langsam) geladen, zerhagelt es die Floatenden Boxen, so erscheint manchmal der Haupttext ganz links und das Bild rutscht runter. Klickt man dann auf aktualisieren (F5) wird die Seite wieder richtig angezeigt. Mal gehts, mal nicht. Liegt das eventuell daran, dass das Floaten nur funktioniert, wenn alle Bilder vollständig geladen sind?

2) Internet Explorer 5, 5.5 & 6
Habe im CSS mit *html fixe Breiten angegeben, da ja min & max widt & height nicht unterstützt werden. Die Seite wird nun eigentlich fast richtig angezeigt (das große Bild links ist noch etwas zu schmal). Damit der hellgraue Trennstrich zwischen Bild & Haupttext bei unterschiedlichen Höhen durchgehend angezeigt wird habe ich ebenfalls mit *html ein fixes Hintergrundbild dafür definiert. Nur: Seither wird die Seite manchmal so geladen:

Vorübergehender Link zum reinschauen:
http://www.trueprojects.com/test55/screen1.jpg

Woran kann das liegen und wie kann ich das beheben?

3) Internet Explorer 7

Keine Ahnung warum Microsofts neuer Browser folgendes macht, aber aus mir unbekannten Gründen floatet er auch nicht so wie es der Firefox macht und ich es gerne hätte. Statt dessen kireg ich sowas zu sehen:

Vorübergehende Links zum reinschauen:
http://www.trueprojects.com/test55/screen2.jpg
http://www.trueprojects.com/test55/screen3.jpg
http://www.trueprojects.com/test55/screen4.jpg

Bin dankbar für alle Überlegungen, Ansätze und Lösungsvorschläge! Vielen Dank, viele Grüße

Hallo Hanü,

Der CSS-Code ist nicht valide:
http://jigsaw.w3.org/...2Ftest55%2Fjobs.html

Verschiedene alternative CSS-Dateien für den Internet Explorer kannst Du so einbinden:
http://de.selfhtml.org/...chen.htm#alternative

Hi Sabine, ich habe die IE-Anweisung jetzt mit dem Kommentar-Import vom eigentlichen CSS getrennt und damit kommt bei der Viliditätsprüfung ein OK. Aber die Probleme (seltsamer Seitenaufbau bei Firefox & IE7) bestehen weiterhin!? Ich komm da echt nicht weiter? Muss man die Seite und alle dazugehörigen Dateien erst vollständig laden, dass er die Boxen richtig floatet und wenn ja, wie mach ich das? Viele Grüße!

Mach mal den Cache leer.
Die seltsame Verschiebung der Bilder beim Aufbau der Seite
http://www.trueprojects.com/test55/index.html
kann ich im Firefox jetzt nicht mehr beobachten.
Es scheint so, als ob im Firefox jetzt alles richtig gerendert wird.
IE habe ich noch nicht getestet, habe nur IE4 zur Hand.

Hi,

den Float-Fehler im IE7 konnte ich zwar nicht nachvollziehen, ich habe aber eine Lösung gefunden: So haben jetzt alle Seiten im Inhaltsbereich eine div-Box rechts, allerdings mit teilweise nur 5% Breite. Damit wird der restliche Text korrekt umflossen und somit auch korrekt angezeigt. Sicher nicht die Musterlösung, funktioniert aber.

Anzeigefehler in den alten IE-Versionen (5-6) konnte ich auch soweit korrigieren und das entsprechende CSS ist im Quelltext als Kommentar importiert:
<!--[if lte IE 6]>
<style type="text/css">@import url(css/ie.css);</style>
<![endif]-->

Der Firefox macht auch, was er soll und den Anzeigefehler beim Seitenaufbau tritt im Moment auch nicht auf. Glaube aber nicht, dass es am Cache liegt, denn den leere ich immer wieder zwischendurch. Vielleicht lag es ja mit an den *html-Anweisungen für die alten IE-Versionen... ich weiß es nicht. Sicherheitshalber werde ich die Seite mal im Testforum checken lassen :)

Jetzt muckt nur noch Opera rum...
Netscape scheint alles richtig.
CSS und HTML valide ist es auch!?

Danke dir!

IE 5-7 & Netscape funktionieren wunderbar, aber das Firefox-Problem macht mir doch zu schaffen. Der Anzeigefehler tritt blöderweise nach wie vor ab und zu auf (leider auch beim Kunde):

Fehlerhafte Darstellung:
http://www.trueprojects.com/test55/screen-a.jpg

Korrekte Darstellung:
http://www.trueprojects.com/test55/screen-b.jpg

Habe inzwischen auch mal eine neue Blankoseite mit eigenem CSS nachgebaut und der Fehler tritt dort auch auf... aber eben nicht immer!? Ich check's nicht....

Hallo trueprojects

Ich versteh es auch nicht.
Die Version screen-b ist exakt 50px schmaler als die Version screen-a. Da müssen verschiedene CSS-Anweisungen im Spiel sein, oder sinds verschiedene Browser?
Such mal nach einer Anweisung die 50px enthält, oder die Du um 50px (oder einen ganzzahligen Teiler davon) geändert hast.
Irgendwo hast Du aber schon noch einen Hund begraben. Schau Dir mal die Seite mit Opera9 unter WinXP an ...
Immer ein guter Tipp: beseitige mal schnell die Fehler im Code
http://validator.w3.org/...2Ftest55%2Fjobs.html

Gruss
Martin

Und eine Aufruf des CSS-Validators schadet auch nie:
http://jigsaw.w3.org/...com/test55/jobs.html
CSS stimmt aber ;)

Ok, konnte Anzeigefehler im Opera korrigieren, indem ich dem div, der den ganzen unteren Teil enthält, width="100%" zugewiesen hab. Interessanterweise tritt der Firefox-Anzeigefehler seither auch nicht mehr auf?!

Dafür macht der IE5 mir noch zu schaffen, der zeigt manche Seiten nach wie vor manchmal so an: http://www.trueprojects.com/test55/screen1.jpg

Ich gehe davon aus, dass es an der Überschrift h1 oder einer Höhenangabe von #header liegt. Entferne ich display:hide zeigt es die natürlich die Headline, aber macht nicht so einen riesen Abstand im Header... Anregungen?

Seiten sind inzwischen valide - hoff ich doch! :) Gruß

Boah, ich werd' wahnsinnig! Beiß mir jetzt auch wieder am IE 6 die Zähne aus... Da zerhagelt es den unteren Bereich komplett. Schaut euch mal den Käse an (vorübergehender Link):
http://www.trueprojects.com/test55/screenIE6.jpg

Bitte bitte helft mir weiter, meine Nerven liegen echt blank..... interpretiert die 6er Version jetzt etwa die Angaben für ältere Versionen nicht mehr und wenn ja warum nicht?! Im 5er klappts halb (nur beim ersten laden aus dem internet > siehe Fehlerbeschreibung oben), der 7er mag, der 6er wollte bisher auch - und auf einmal das!? Hab versucht, alle Änderungen rückgängig zu machen, finde aber nicht den Grund für die fehlerhafte Darstellung.

Hier mal ein Auszug der CSS für die älteren IE Versionen:

Code

*html #content { width: 728px; } 
*html #mainmenu, #home, [..] { width: 114px; } 
*html #main { background-image: url(../images/ie-bg.gif); } 
*html #body { width: 70%; } 
*html #left_01,  #left_02, [..] { margin-right: 70%; height: 475px; } 
*html #submenu #management { margin-left: 15.7%; } 
*html #middlefull { margin-right: 3%; } 
*html #rightfull {width: 3%; } 

Der 6er ignoriert schon die erste Anweisung, bei der die Gesamtbreite fix auf 728px gesetzt werden soll, weil er ja eigentlich min-/max-width noch nicht kennt........

Hi Hanü,

kein Wunder, steck den Code mal in den Validator:
http://jigsaw.w3.org/.../validator-text.html

Hier habe ich noch ein Beispiel ohne Browserweiche und ohne Hacks,
das in allen Browsern funktioniert (ja, sogar in Netscape 4 :-)

http://sperner.googlepages.com/...g-fix-zentriert.html

Vielleicht kannst Du damit etwas anfangen.

Oder nimm doch einfach eine Tabelle mit 4 Zellen (oben, links, rechts unten).