Druckversion des Themas

Geschrieben von: Pinking 14.09.2008 - 20:14

Servus Leutz,

ich hab da ein kleines Problem... Ich hab in einem RC-Car-Verein das Amt des Co-Webmasters übernommen und bin nun mit folgendem konfrontiert, zu dem ich selber keine funktionierende Lösung finde:

Es geht um folgende Seite: http://rc-car-vorarlberg.at/index.php?page=strecke

Im Firefox und Opera wird die Seite korrekt dargestellt, im IE7 haut's die Bilder über die Schrift...

Erstellt wurde die Seite mit so'nem WYSIWYG-Editor, so dass die Fehldarstellung erst aufgefallen ist, als schon alles fertig war... *argh*

Kann mir von Euch jemand ad hoc sagen, wo's da klemmt?? Aber nicht erschrecken, der html-Code schaut ziemlich bitter aus... *gg*

Vielen dank für Eure Bemühungen

Grüßle,

Pinking

Geschrieben von: Thomas 15.09.2008 - 8:30

So auf die Schnelle sehe ich nichts, allerdings ist es immer sehr aufwändig, wenn man zur Analyse vorher CSS-Dateien auflösen muss. Hast du mal probiert, die Bilder ohne DIV-Tag einzusetzen und/oder im HTML-Code vor dem Text zu platzieren?

Noch ein grundsätzlicher Tipp: Auch in Zeiten von DSL sollte man nienienie Bilder in Megabyte-Größe online stellen, um sie dann vom Browser auf Briefmarkengröße verkleinern zu lassen. Immer erst die Bilder auf die gewünschte Größe bringen und dann diese Versionen hochladen.

Geschrieben von: schommer 15.09.2008 - 12:24

Hallo,

mir ist auch aufgefallen, dass die Seite recht lange lädt.
Der Grund:

Die Bilder sind alle 5-6 MB Gross und liegen in der Originalgrosse 1600x1200 vor, müssen also vom Browser skaliert werden.
Jemand mit ISDN Leitung braucht ca. eine Stunde um die ganze Seite zu laden =)
Dann ist im IMG Tag oft nur die Breite angegeben und nicht die Höhe, möglicherweise ist es das, was den IE7 irritiert.

Mit http://www.irfanview.com/ kannst du ganze Ordner von Bildern umwandeln/verkleinern etc....

Du solltest die verkleinerten Bilder dann neu in die Seite einfügen.

gruss gregor

Geschrieben von: Pinking 15.09.2008 - 12:49

Dass die Bilder komprimiert werden müssen ist eh klar, das ist auch der eigentliche Grund, warum man mich da zum Co-Webmaster gemacht hat... Die Jungs haben zwar 'ne Menge Ahnung von RC-Cars, aber eben so gut wie 0 Ahnung von Web-Zeugs...

Eigentlich dachte ich, dass es keine große Sache sein kann, die Bilder auch im IE an ihrem vorgesehenen Platz anzeigen zu lassen, aber nach mehreren Stunden rumprobieren ist mir schwindelig geworden und ich musste mir eingestehen, dass meine html-Kenntnisse da an ihre Grenzen stoßen... :-(

Drum wende ich mich an Euch, in der Hoffnung, dass hier jemand den Fehler findet und mir dabei hilft, ihn zu korrigieren...   

Geschrieben von: Thomas 15.09.2008 - 13:05

Was hast du denn alles probiert? Unter anderem auch das, was ich und Gregor oben vorgeschlagen haben?

Geschrieben von: Pinking 15.09.2008 - 14:32

Na ja, ich hab halt ein bissele mit dem Code herumexperimentiert, geschaut, was für was zuständig ist (gerade bei den <div>) und dann eben geschaut, wie ich die Bilder im IE neben den Text bekomme... Da es in anderen Browsern korrekt dargestellt wird, dachte ich, dass es evt. nur eine Kleinigkeit ist, über die eben der IE stolpert... Aber damit lag ich wohl falsch... :-(

Geschrieben von: Conny 15.09.2008 - 16:21

Hallo,

die von Dir erwähnte Seite (Page=Strecke) enthält -laut Tidy- 118 Fehlern!
Da würde ich zuerst ansetzen; möglicherweise ist nach Bereinigung der Fehler das Problem auch behoben.

Sonst kann man davon ausgehen, daß die Summe der vorgesehenen Breite für den Text plus die des Bildes die Breite des DIVs übersteigt. Oder ein ähnliches gelagertes Problem liegt vor.
Halten die Browser sich an die breiten Angaben 'passt' es nicht mehr nebeneinander, folglich erscheint es unter einander. Andere Browser 'sprengen' die Breite und zeigen vermeintlich korrekt an...
Ich Denke da liegt der Tenor dieses Fehlers.

cu
Conny

Geschrieben von: Thomas 15.09.2008 - 18:06

Hm - jetzt weiß ich immer noch nicht, ob du das ausprobiert hast, was Gregor und ich angesprochen haben .

Geschrieben von: Pinking 15.09.2008 - 20:32

Super, werd' mich mal mit Tidy beschäftigen und mal schauen wie's nach der Bereinigung ausschaut... ^^ Ich gehe mal davon aus, dass Tidy nicht nur Fehler zählt sondern sie auch ausgibt, oder? *gg*



Kann ich die Breite der DIVs variieren? Oder würd's in dem Fall was bringen, die Bilder ein bissele kleiner zu machen? Okay, das kann ich ja gleich mal ausprobieren... *g* Hm, bringt nüscht... :-( Hab width="270" von den Bildern mal runtergesetzt aber selbst bei width="50" rutschen die Bilder über den Text... *argh*




Ich hab mir 'ne Kopie vom Quelltext gemacht und z.B. mal die <div>-</div> näher angeschaut... da ist mir aufgefallen, dass nicht zu jedem <div> ein </div> vorhanden ist und habe mal mit Löschen/Hinzufügen von DIV's an mir sinnvoll erscheinenden Stellen herumexperimentiert...
Sogar mit einem kleinen Teilerfolg, denn das erste Bild bekomm' ich neben den Text... Alle anderen aber wieder nicht und das macht mich stutzig... Zudem wird die Position vom Newsbereich und dieser Chat-Übersicht ebenfalls von den DIV's beeinflusst, so dass diese beiden Bereiche gerne mal an's Ende der Seite rutschen wenn ich da nicht aufpasse... :-(


Ja, das hab ich schon probiert, aber dabei haut's mir, wie oben schon beschrieben, den News- & Chat-Bereich unter die Seite... *grummel* Aber ich werd's mir noch mal zur Gemüte ziehen und weiter herumprobieren... ^^


Hm, das könnte sein... das probier ich mal flux aus... *g* (hab den Satz irgendwie überlesen...)
Also, das bringt auch keine Änderung, außer dass sich je nach Wert die Höhe des jeweiligen Bildes verändert, was es ja auch soll... *g* Aber es bleibt dennoch im IE am falschen Ort... :-( 

Danke schon mal für die vielen Antworten und Hilfestellungen, bin begeistert obwohl ich noch nicht wirklich weitergekommen bin...

Grüße,

Pete

Geschrieben von: db 15.09.2008 - 21:09

Ich nehme an, du verwendest phase 5 als Editor. Im Hauptmenü hast du unter html-Quelltext
die Möglichkeit z.B. fehlende End-Tags zu entdecken. Ist gleich der erste Menü-Eintrag.

Geschrieben von: db 15.09.2008 - 22:21

Mein Gott, dieses Template ist ja kaum zu überbieten. Selbst Frontpage würde sich da
schwer tun.

Lade das in einen Editor deiner Wahl und ersetze zumindest <div/> durch <div>

Danach würde ich die nicht notwendigen <p><font>...</font></p> entfernen,
damit man langsam sowas wie Überblick gewinnt.

Die Ladezeit ist natürlich nicht nur für Besucher ein Horror. Auch während der Entwicklung
ist das eine echte Hürde. Also mal statt 14 nur einen "Artikel" anzeigen.

Geschrieben von: Auge 15.09.2008 - 22:24

Hallo
In dem Quelltext ist jede Menge Müll drin. <div>s, die leer sind und offensichtlich nur dazu dienen, vertikal Abstände zu schaffen, <font>-Elemente, die ebenfalls leer und zudem gänzlich überflüssig sind, groß geschriebene Tags (im auf der Seite verwendeten XHTML verboten), alles potentielle Fehlerquellen.

Mal als Beispiel ein Datensatz eines Mitglieds, wie ich ihn auszeichnen würde (zur Darstellung ist damit noch nichts gesagt):

Ineinander verschachtelt sind Elemente, die bestimmte andere Elemente sinnvoll gruppieren. Die Klassennamen sind entsprechend gewählt, sodass der Quelltext den Einsatzzweck widerspiegelt.

Ob das die beste Lösung ist, ist diskutabel, schlüssiger und auch übersichtlicher ist sie allemal. Du solltest also definitiv in Erfahrung bringen, auf welche Weise der HTML-Code generiert wird (z.B.: CMS mit Templates, hartkodiert per PHP) und eine Überarbeitung desselben anstreben und durchführen, bevor du an ein sonst unauffindbares Problem, wie die verschobenen Bilder, gehst.

Tschö, Auge

PS: Weil hier die fehlende Höhenangabe angesprochen wurde, alle Browser, die ich kenne, errechnen aus nur einer der Angaben die fehlende, sobald ihnen die physische Auflösung eines Bildes bekannt ist. Daran sollte es nicht liegen.

Geschrieben von: Pinking 16.09.2008 - 13:43

Super Männers, das schaut doch mal klasse aus. Ich denke, das ist der richtige Ansatz um da Ordnung in die Seite zu bekommen... :-)

Vielen Dank schon mal, werd' mich die Tage, wenn mein Rücken wieder okay ist, dran setzen und Eure Vorschläge in die Tat umsetzen...

Vielen Dank :-)