Darstellungsfehler auf www.princess-diana-pictures.com

scupidu

Hallo,

Firefox benutze ich erst seit einigen Tagen. Und - schwupps - muss ich leider feststellen, dass einige Seiten falsch dargestellt werden, was ich mit dem IE nie gesehen hatte.
Hier das Problem -schaut selbst:
http://www.princess-diana-pictures.com/new-pictures-of-princess-diana.php

Die Breiten und Höhen der Tabellen erscheinen leider "beliebig" ?

Im Quelltext ist das die Stelle ab der Commentzeile:

Wie ihr sehen könnt, benutze ich hier Fieldset- und Legend-Tags

Etwas tiefer im Quelltext (für die rechte Tabelle: "Random images from our archives"
Quelltext ab: 
habe ich diese Technik noch verschachtelt mit einer Tabelle, bei der das eigentliche, darzustellende ZufallsBild als Hintergrundbild erscheint. Darüber liegt permanent ein transparentes Bild. (_princess-diana.gif). 1. Um den Bilderklau etwas zu erschweren und 2. um ein feste Höhe der Zelle / Tabelle zu erzwingen. Die Zufallsbilder selbst haben immer eine Höhe von 300px

Wie kommt es zu dieser seltsamen Darstellung?
Das gleiche Problem habe ich übrigens noch schlimmer auch auf dieser Seite:
http://www.princess-diana-pictures.com/princess_diana_latest_news.php

2 Tabellen greifen / liegen hier seltsamerweise in- bzw. übereinander.

Kann mir hier jemand bitte konkret helfen, dieses Problem zu lösen ?
Wie kann ich feste Breiten und Höhen solcher Tabellen / Zellen definieren, in denen der Inhalt (Bilder oder News) variert? Und das ganze noch mit
schicken Fieldset- und Legend-Tags ?

Oder läßt sich das mit DIVs lösen? Oder vielleicht auch nur mit weiteren transparenten 1px-Gifs?

So - liebe Experten: Nun bitte ran !

_hb_

Fehlersuche begint hier : http://validator.w3.org/check?verbose=…ncess-diana.php

Sebastian

da sind allerdings keine fehler dabei die darstellungsprobleme verursachen dürften.

Steph

Bereinige doch erstmal die Fehler im Quelltext + CSS!

Setze eine DOCTYPE-Deklaration!

LEFTMARGIN usw., bei <legend> sehe ich gar kein Eingabeformular ...

scupidu

Die Seite lasse ich gerade validieren.
Werde 1. die js-Fehler rausnehmen durch type="text/javascript" und
2. die ...MARGIN-Fehler versuchen, durch css wegzubekommen.

Doch das hat ja alles nichts mit meinem eigentlichen Problem zu tun.

bender_21

Zitat

dass einige Seiten falsch dargestellt werden, was ich mit dem IE nie gesehen hatte.

[Blockierte Grafik: http://www.my-smileys.de/smileys2/00009157.gif][Blockierte Grafik: http://www.my-smileys.de/smileys2/ugly_08.gif]
sorry musste aber sein

scupidu

Zitat

sorry musste aber sein

*lol Da muss ich selber lachen
Habe nie andere Browser benutz und validieren war bisher nen Fremdwort Nun aber ist es an der Zeit ...

Ok - habe nun einiges in Quelltext verändert - die Fehler bleiben???

Zitat

bei <legend> sehe ich gar kein Eingabeformular ...

Wie? - was ?? HAbe noch ein <form>Tag hinzugefügt - die Fehler bleiben
Also zurück zum eigentlichen Problem:
Wie kann ich feste Breiten und Höhen solcher Tabellen / Zellen definieren, in denen der Inhalt (Bilder oder News) variert? Und das ganze noch mit
schicken Fieldset- und Legend-Tags ?
Erkennt jemand von Euch den Fehler im Quelltext?
Vorschläge?

xeen

schauen wir mal...
so überflogen (meine fresse...deine einrückungen sind grauenhaft... nur so für dich als tipp: mach korrekte einrückungen, erleichtert das bearbeiten ungemein. z.B.
<html>
__<head>
_____<title>hallo</title>
__</head>
usw. [die unterstriche sollen leerzeichen sein, aber sonst zeigt er mir die im forum net an])

Code

<!-- Hier auch auf Breite des Bildes stellen-->
<fieldset style="border : 1px solid white; width : 400px; height : 300px;">

Ok, höhe: 300px.

Code

<p align="center"><br>

So wie ich das sehe wird das p 1. nicht geschlossen und später nochmal unnötiger weise wiederholt. auf jeden Fall erzeugt es zusätzlichen abstand.

Code

<img border="0" src="http://www.princess-diana-pictures.com/new-picture.php/new-picture-of-diana.jpg" vspace="8" hspace="8" height="300">

AHA! Das Bild hat eine Höhe von 300 Pixeln.... Aber der Rahmen auch... und du fügst vor+hinterm bild noch abstände hinzu... Wie soll das funktionieren?

scupidu

Das klingt nach FAchmann - klasse !!! *freu

Die Sache mit dem Einrücken - gute Sache - werde ich mir ab jetzt angewöhnen.

Zitat

<p align="center"><br>

Wo sollte ich es nur schließen via </p> ?

Die 8 px habe ich als Abstand gesetzt, damit der Rahmen nicht am Bild klebt.
Wie kann ich das sonst lösen? Die Bilder sind zwar immer 300px hoch, varieren aber in der Breite. Dem Rahmen 416 / 316 px zuordnen?
Also

Zitat

<fieldset style="border : 1px solid white; width : 416px; height : 316px;">

xeen: Kannst du mir einen HTML-Vorschlag geben? Please.

Dr. Evil

Zitat

Die 8 px habe ich als Abstand gesetzt, damit der Rahmen nicht am Bild klebt.
Wie kann ich das sonst lösen? Die Bilder sind zwar immer 300px hoch, varieren aber in der Breite. Dem Rahmen 416 / 316 px zuordnen?

mit etwas Padding fürs fieldset:

Code

<fieldset style="border : 1px solid white; width : 400px; height : 300px; padding: 8px;">

scupidu

HAbe dem fieldset etwas Padding verpaßt - und bei den Bilder dafür vspace / hspace rausgenommen.
Das Problem ist immer nooh da.

Die linke Table 
wird auch nicht mit 400 px dargestellt, sondern zieht sich viel breiter auseinander ????? Nämlich sie wird mit 416 px dargestellt?

Wie wäre es mit dieser Idee? Ich baue die linke Tabelle genauso um wie die rechte, nämlich mit einem transparenten Gif als Inhalt und das eigneliche Bild darunter als
<td style="background:

Soll ich es mal so machen?

MartinH

Hallo scupidu,

bedenke bitte auch, dass das besagte Fieldset (Breite 400px, Höhe 300px) in einer Tabellenzelle steckt, deren Breite und Höhe mit 185 und 200 angegeben sind (suche im Quelltext nach 185). Das kann doch nicht gutgehen!

Martin

xeen

Entferne für fieldset am besten die angaben. Ebenfalls für die Tabellenzelle die MartinH angesprochen hat. Mit Dr. Evils padding-Lösung hast du immer genug abstand vom Rahmen zum Bild, eine Größenangabe ist daher sowieso überflüssig, der Rahmen passt sich immer ans bild an...

scupidu

Super.
Das waren die entscheidenden Tipps der Profis!
Danke an Euch alle - es hat geklappt.

Wäre da noch vielleicht eine klitze kleine Sache:
Auf der Seite
http://www.princess-diana-pictures.com/diana-princess-more-stuff.html wird die rechte Spalte "Entertainment" im Firefox leider etwas versetzt nach unten angezeigt.
Im Quelltext ab Kommentar

Kriegen wird das auch noch hin?

Nebenbei gefragt:
Wenn das dann alles steht, werde ich mich mal daran machen, dass alles HTML 4.01 ´- konform zu machen.
Gibt es einen empfehlenswerten Editor, der sauberen HTML-Code schreibt.
Und zweitens: ist es richtig, dass man NICHT-HTML 4.01 conformen Code via CSS doch einsetzen kann?
Und dann gleich drittens: Bei meinen Menülinks sind so schicken Punkte zur Trennung der einzelnen Menüpunkte. Der Validator mekert

Zitat

Line 114, column 34: non SGML character number 149
<p align="left" class="menulinks">¼/strong>? <a title="Home" href="index.html">home</a><

Wie kann ich das Problem lösen? Oder sollte ich den mekern lassen?

Gruss

MartinH

Zitat von scupidu

Wäre da noch vielleicht eine klitze kleine Sache:
Auf der Seite http://www.princess-diana-pictures.com/diana-princess-more-stuff.html wird die rechte Spalte "Entertainment" im Firefox leider etwas versetzt nach unten angezeigt.

Ich sehe mitten auf der Seite ein Bild, das große Teile des Textes verdeckt. Naja ist nur ein nerviges Popup, kann man sogar schließen, wenn man das Zauberwort gefunden hat.
Beim Überfahren der Links zu anderen Seiten (und anderer Links) erscheint der vertikale Scrollbalken für einen kurzen Moment, was die ganze Seite wackeln lässt.
Aber mal sehen, warum der rechte Kasten durchhängt und was ¼/strong sein soll. Und dabei nicht von fragwürdigen Codefetzen wie diesem hier verwirren lassen:

Code

<td ALIGN="CENTER" VALIGN="TOP" width="24">
<img src="images/spacer.gif" HEIGHT="1" WIDTH="10" alt="crash death biograpy memorabilia"><img border="0" src="images/spacer.gif" alt="pictures of diana princess" width="23" height="1"><br>
</td>

Sollen die alt-Texte Blinden vorgelesen werden, oder wozu dient diese Zelle?

Martin

scupidu

Danke das du dich mit der Sache beschäftigst

Zitat

Ich sehe mitten auf der Seite ein Bild, das große Teile des Textes verdeckt. Naja ist nur ein nerviges Popup, kann man sogar schließen, wenn man das Zauberwort gefunden hat.

Diana-Fans mögen Bilder Das Popup erscheint aber nur 1x - Cookies

Zitat

Beim Überfahren der Links zu anderen Seiten (und anderer Links) erscheint der vertikale Scrollbalken für einen kurzen Moment, was die ganze Seite wackeln lässt.

Bei einer 1024 Auflösung auch ? Ich kann das hier nicht rekonstruieren !
Bei den unteren Links "MORE PRINCESS DIANA LINKS" erscheint bei mir - bei IE und Firefox - eine Art "Tooltip Layer" DHTML -> Spielerei vielleicht, sollte ich ggf. entfernen ?!

¼/strong - da meint der Validator wohl dieses
•
Punkt mit, nehme ich an.

xeen

Zu deinem HTML Problem komm ich weiuter unten.

Nebenbei:
1. Ja, Brain 1.0, Editor kannste verwenden welchen du willst. Bloß kein WYSIWYG (sowas wie Frontdoof)
2. Ja, weil einige HTML Attribute durch CSS Eigenschaften ersetzt wurden
3. Dieses 1/4 Zeichen wird so nicht in HTML angegeben. Die Korrekte Notation wäre & #188; oder & frac14; - bloß jeweils das Leerzeichen entfernen nach dem & (wenn ich das nicht mache wird wieder nur das Zeichen angezeigt) Gibt noch mehr so Sonderzeichen, eine Afulistung findeste hier: http://www.blooberry.com/indexdot/html/…tity160-191.htm

Der Bildlayer: ist absolute scheisse. Erstmal diese dumme Bewegungsanimation, dann dieses behinderte Wackeln dass man egal was man gerade macht auf jeden Fall abgelenkt wird, es kommt bei jedem reload wieder, ich muss es jedesmal wegklicken und außerdem hab ichs nicht verlangt. mach das erstmal raus sonst hält mans ja net aus die Seite zu betrachten.

Nochwas:

Code

<fieldset style="border : 1px solid white; width : 100%; height : 160;">

Das stimmt so nicht. Im Gegensatz zu HTML erfordert eine Angabe von Längen in CSS immer die Einheit, damit er weiß was er machen soll. Oder willst du lieber 160 Kartoffeln Breite haben? Nein, gut dann schreib' lieber 160px hin (ist sogar recht wichtig, wenn du mit der validierung anfängst und einen doctype hinzufügst dann kann es bei strikten doctypes passieren dass firefox die angabe ignoriert - strict heißt streng und dann stolpert er eben über alles [ich merk grad, doctype ja schon da... egal... falls du mal dein level erhöhen willst ;)]

so jetzt.
Also das ist ja. Ich kann dir mit einem Hack helfen. Aber so. Das Debuggen ist unheimlich schwer da für jedes bisschen Platzieren eine bilnde Tabelle verwendet wird und ich nach dem outlinen nichts erkenne.
Räum vorher vielleicht erstmal den Code auf und beheb die Fehler so gut es geht, vielleicht löst sichs von alleine (soll vorkommen) ansonsten meld dich danach nochmal, in dem Quelltext blick ich nicht durch.
Der Hack beruht auf einem Bug im IE, daher sollte die Seite danach in Geckos und im IE gehen, Opera stellt den Kasten in jeder Version falsch dar. (Original, der mit dem Hack und der Fuchs gefixten)
Füg bei dem CSS von Fieldset noch folgendes hinzu:

Code

margin-top:-8px;margin-left:-18px;_margin-top:0px;_margin-left:0px;

Nicht valide, geht aber. Verschiebt rechte Box und da der IE ein scheiss Browser ist ignoriert er den Unterstrich der Eigenschaften weswegen die Werte wieder überschrieben werden (die IE-Werte ggf. anpassen).

Ich hätte noch eine Fuchs Variante mit der ich den Quelltext so geändert habe das es im Fx richtig aussieht... aber da geht IE net mehr. Bringt auch nix.
Ich würde also mal schauen, dass der Code valide wird - weil so ist's extrem schwer irgend wie rauszufinden was falsch ist, weil es keine Regeln zum interpretieren von falschem Code gibt.

xeen
ps: ich glaube übrigens dass die Entertaiment Zelle die einzige ist die "richtig" angezeigt wird und die dass die anderen beiden eigentlich falsch sind. wenn man die anzeige mit dem ie vergleich, fällt auf warum)[/code]

MartinH

Die rechte Spalte hängt wegen rowspan="2" tiefer. Sie reicht also noch über den Teil "MORE PRINCESS DIANA LINKS" nach unten.
Aber es liegt doch wohl eher an der rechts verschachtelten Tabelle mit cellspacing=20 im Gegensatz zu cellspacing="0" in den entsprechenden Tabellen links und Mitte.

xeen

Zu den Mouseover links:
Ich krieg da nen kurzen "blitz" vom vertikalen scrollbalken, der ist aber auch sofort wieder weg.

Mal so ein paar allgemeine Tipps fürs Webdesign:
1. Bewegen tut sich nur wenn ich das sage und auch will oder wenn ich vorher drauf hingewiesen werden.
=> Man will schnell an informationen kommen und dann auch in ruhe lesen.
Alles was sich animiert ist nicht schnell, sondern dauert und zweitens muss man erstmal den schalter finden der zu dieser animation führt. Lass sie lieber weg bzw. Zeig sie direkt am Mauszeiger oder stelle Text in einer dafür vorgesehenen Textbox dar. Sodass der User weiß, "ah in dieser Textbox stehen inhalte". (mach z.B. ein fieldset und gib dem eine id. dann per JS per document.getElementbyID("id").innerHTML='inhalt'; immer noch js, immer noch nix für die non jsler, aber wenigstens erträglich.
2. Javascript ist böse. Vorallem JavaScript only ist böse! Es gibt viele Leute die ohne JavaScript surfen. Wieso auch, wird eh selten für was wirklich wichtiges gebraucht (wenn dann eh nur für mousemovers bei menüs)

Bei diesem Punkt den du für die Menüs verwendest gilt dasselbe wie für die 1/4 anzeige. Die 1/4 kommen nur weil du spezielle Mathematik fonts isntalliert hast. Einfach den Punkt durch die HTML entsprechung ersetzen (siehe link den ich vorhind gepostet habe)

grüße

scupidu

Hallo Freaks

Also Eure Tonart ist ja wirklich lustig *grins.
Ich wollte ja nur eine schicke Seite bauen -> und nun ... und nun :oops:
Eine Tabelle mit 160 Kartoffeln Breite / grauenhafte einrückungen / ein nerviges Popup mit Zauberwort zum Schliessen / ein ¼/strong -was es nicht gibt / alt-Texte, die Blinden vorgelesen werden / einen Bildlayer, der absolute scheisse ist / böses JavaScript

*lustig
Oki - ich will es ja lernen, drum gebe ich mich gerne dieser Blöße hin [ wenn nur bloss keiner in meinen Quelltext schauen könnte ]
Ich WAR so stolz auf meine Seite! ... bis ich in dieses Forum kam!

Im Ernst - ich werde eure Hinweise und Ratschläge in Ruhe bearbeiten und melde mich sehr gerne morgen wieder. Werde mal ordentlich so umbauen, dass man auch ohne "spezielle Mathematik fonts" hierhin surfen kann.

THX
Ihr seid klasse