<form> Tag rutscht nach unten!?

[jeti79]

Hallo!

Ich bin noch etwas grün hinter den Ohren, was das Layout mit css angeht, beschäftige mich jetzt aber schon ne Weile damit. Ich habe für meine Seite ein zweispaltiges LAyout mit header und footer gewählt, was soweit auch super funktioniert (FF3.0.4) und im IE 6.0.x - allerdings habe ich jetzt ein kleines Problem im IE 6.0.x:

Auf dieser Seite: HIER stellt der FF alles so dar, wie es sein soll. Im IE rutscht das Kontaktformular jedoch an eine Stelle, die so aussieht, als wenn Sie sich an der Grafik auf linken Seite orientiert!?

Der <h3> wird noch oben auf der Seite dargestellt, nur das Form rutscht herunter. Ich habe schon versucht, die Größe der Tabelle des Forms zu ändern, jedoch ohne Erfolg.

Bitte zerreist mich nicht gleich in der Luft, ich weis, dass mein Quellcode verbesserungsfähig ist :(

Ich würde nur gerne wieder auf einen richtigen Weg kommen, um das Formular auch im IE richtig dargestellt zu bekommen ...

Grüße,
Jens

[Felix Riesterer]

Lieber jeti79,

reden wir wieder darüber, wenn Deine Seite fehlerfrei ist...

Liebe Grüße,

Felix Riesterer.

[jeti79]

ok, ich versteh nur Bahnhof. Dann bleibe ich wohl doch besser bei Tabellen, das erscheint mir einfacher.

Danke

Lieber jeti79,

reden wir wieder darüber, wenn Deine Seite fehlerfrei ist...

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber jeti79,

ok, ich versteh nur Bahnhof. Dann bleibe ich wohl doch besser bei Tabellen, das erscheint mir einfacher.

einfacher ist nicht unbedingt besser. Ich möchte Dir ja helfen, daher mein Posting.

Deine Seite wird ohne passende Zeichenkodierung ausgeliefert. Daher kann der Validator die syntaktische Richtigkeit Deines Codes nicht ermitteln. Das kannst Du aber schnell beheben, indem Du folgende Zeile in Deinen Code aufnimmst:

<meta name="content-type" content="text/html; charset=iso8859-1" />

Solltest Du diese Information aus Deinen PHP-Scripten heraus ausgeben lassen wollen (was diese Zeile unwirksam werden lässt), dann geht das so:

header('content-type', 'text/html; charset=8859-1');

Diese Zeichenkodierung passt mit dem Output Deiner Seite zusammen. Solltest Du aber alles in UTF-8 kodiert haben, anstatt in ISO-8859-1, dann ändere die Werte entsprechend ab.

Was sagt der Validator nun?

Liebe Grüße,

Felix Riesterer.

[jeti79]

Danke für Deine Hilfe - anscheinend bin ich noch ein wenig lern-resistent:

liegt es also daran, dass die meta-angaben nicht im php-Dokument selbst gespeichert sind, sondern in meiner header-Datei?

Ich war der Überzeugung, das, wenn ich header- und footer-Dateien auslagere, Sie automatisch mit eingebunden werden (so wie das Ergebnis im Browserquelltext)

[Felix Riesterer]

Lieber jeti79,

anscheinend bin ich noch ein wenig lern-resistent:

ist hier nichts ungewöhnliches...

liegt es also daran, dass die meta-angaben nicht im php-Dokument selbst gespeichert sind, sondern in meiner header-Datei?

Was auch immer Deine header-Datei sein soll. Keine Ahnung.

Ich war der Überzeugung, das, wenn ich header- und footer-Dateien auslagere, Sie automatisch mit eingebunden werden (so wie das Ergebnis im Browserquelltext)

Keine Ahnung, was Du da programmiert hast. Daher: Keine Ahnung.

Entscheidend sind zwei Dinge: Welchen MIME-Typ (der mit dem content-type-Header angegeben wird) erhält der Browser? Erhält er im HTML-Dokument eine entsprechende Angabe (in einem <meta>-Element), oder/und vom Server im HTTP-Header? Falls beide eine Angabe machen, überschreibt die serverseitige Angabe im HTTP-Header die Angabe im HTML-Dokument.

Fehlt diese Angabe völlig, beginnt das Ratespiel, das fast immer in unerwarteten Effekten (nicht nur visuell) endet.

Liebe Grüße,

Felix Riesterer.

[jeti79]

Was auch immer Deine header-Datei sein soll. Keine Ahnung.

Ich habe den Inhalt so aufgebaut, dass ich oberhalb vom Inhalt der Datei (also hauptsächlich Text) einmal <? include("header.inc.php"); ?> verwende, um zB die obere Grafik immer auf der Seite zu sehen. In dieser Datei habe ich auch meine meta-Daten abgelegt.

In meiner footer.inc.php stehen dann die End-Tags und die Fusszeile usw.

Werden diese dann nicht berücksichtigt und deswegen eine Fehlermeldung ausgegeben??

[jeti79]

Was auch immer Deine header-Datei sein soll. Keine Ahnung.

Ich habe den Inhalt so aufgebaut, dass ich oberhalb vom Inhalt der Datei (also hauptsächlich Text) einmal <? include("header.inc.php"); ?> verwende, um zB die obere Grafik immer auf der Seite zu sehen. In dieser Datei habe ich auch meine meta-Daten abgelegt.

In meiner footer.inc.php stehen dann die End-Tags und die Fusszeile usw.

Werden diese dann nicht berücksichtigt und deswegen eine Fehlermeldung ausgegeben??

Hallo Felix!

Ich habe der Seite mal etwas "header" Hinzugefügt und nun weis der validator zumindest, was ich Ihm erzählen möchte.

Was ich jetzt jedoch noch nicht 100%ig verstehe, sind die letzten Fehler, die ich noch mache, und zwar, dass: <p>, <center>, <h3>, <blockquote> nichtmehr innerhalb des <div> sein dürfen!? Dort ist die Rede von inline Elementen, die dort nicht sein dürfen.
Ich habe schon einige Elemente probiert, aber das wird nicht die Lösung sein. Ich hänge mal wieder fest und bringe mal wieder meine Lernresitenz ins Spiel denn, ich denke, ich ändere an der falschen Stelle :(

Grüße,
Jens

[Felix Riesterer]

Lieber jeti79,

Ich habe der Seite mal etwas "header" Hinzugefügt und nun weis der validator zumindest, was ich Ihm erzählen möchte.

das ist ein Fortschritt.

Was ich jetzt jedoch noch nicht 100%ig verstehe, sind die letzten Fehler, die ich noch mache, und zwar, dass: <p>, <center>, <h3>, <blockquote> nichtmehr innerhalb des <div> sein dürfen!?

Nein, was Du noch immer nicht 100%ig verstanden hast, ist sinnvolles Markup. Die Struktur Deiner Seite ist eine einzige DIV-Suppe. Ein <div>-Element ist zum Gruppieren von anderen Elementen gedacht, keinesfalls aber, um darin inline-Inhalte unterzubringen. Die meisten <div>-Elemente Deiner Seite könnte man durch viel sinnvollere (sprich: sinntragende) Elemente wie z.B. Textabsätze ersetzen.

Dort ist die Rede von inline Elementen, die dort nicht sein dürfen.

Aha, Du weißt also noch nicht, wie eine sinnvolle Struktur aussieht. Sonst würde Dir das nicht passieren. Informiere Dich über Block-Elemente und Inline-Elemente.

Ich habe schon einige Elemente probiert,

Nicht einfach probieren, sondern gezielt informieren und dazulernen wäre hier angebracht.

und bringe mal wieder meine Lernresitenz ins Spiel denn, ich denke, ich ändere an der falschen Stelle :(

Einsicht ist der erste Schritt auf dem Weg der Besserung. Ich fände es besser, wenn Du einen strict-en Doctype verwendetest, um Deinen Code noch strengeren Regeln zu unterlegen, damit Du Dich selbst zu besserem Code zwingst.

Ich mache Dir einen Vorschlag, wie Deine Seite in XHTML strict aussehen könnte. Ob Du dann diesen Weg weitergehen möchtest, überlasse ich Dir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
        <title>Kontakt - Jens Tietze</title>  
        ...  
    </head>  
    <body>  
        <div id="rahmen">  
            <div id="header"></div>  
  
            <div id="content_frame">  
                <h1>Kontakt</h1>  
                <form action="/jenstietze.de_neu/kontakt.php" method="post">  
                    <ul>  
                        <li><label for="fromname">Ihr Name: </label><input type="text" name="fromname" id="fromname" /></li>  
                        <li><label for="frommail">Ihre E-Mail Adresse: </label><input type="text" name="frommail" id="frommail" /></li>  
                        <li><label for="fromtel">Ihre Telefonnummer: </label><input type="text" name="fromtel" id="fromtel" /></li>  
                        <li><label for="mailsubject">Betreff: </label><input type="text" name="mailsubject" id="mailsubject" /></li>  
                        <li><label for="mailtext">Text: <textarea name="mailtext" id="mailtext">(maximal 1000 Zeichen)</textarea></li>  
                    </ul>  
                    <p><input type="hidden" value="1" name="s" /><input type="submit" value="Nachricht versenden" name="submit" /></p>  
  
                </form>  
            </div>  
  
            <div id="shortmenu">  
                <h2>Navigation</h2>  
                <ul>  
                    <li><a href="index.php">Startseite</a></li>  
                    <li><a href="kontakt.php">Kontakt</a></li>  
                    <li><a href="impressum.php">Impressum</a></li>  
                    <li><a href="agb.php">AGBs</a></li>  
                </ul>  
            </div>  
  
            <p id="jeti_frame">  
                <a href="index.php" title="hier gehts immer wieder zu Startseite">  
                    <img src="gfx/banner_links.gif" alt="Startseite">  
                </a>  
            </p>  
  
            <p id="footer">Jens Tietze - Hard &amp; Software - CAD Design - Webdesign - PC Reparaturen - Windowspflege</p>  
        </div>  
    </body>  
</html>

Zur Gestaltung gehe ich erst dann über, wenn die Struktur Deiner Seite stimmt. Mit meinem Vorschlag für Deine Kontakt-Seite sollte die Struktur nun stimmen. Wenn Du diesen Weg weitergehen willst, können wir dann das CSS anpassen.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Ach, immer diese Flüchtigkeitsfehler in der Eile...

<meta name="content-type" content="text/html; charset=iso8859-1" />

muss heißen: <meta name="content-type" content="text/html; charset=iso-8859-1" />

header('content-type', 'text/html; charset=8859-1');

muss heißen: header('content-type', 'text/html; charset=iso-8859-1');

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo Felix,

Ach, immer diese Flüchtigkeitsfehler in der Eile...

<meta name="content-type" content="text/html; charset=iso8859-1" />
muss heißen: <meta name="content-type" content="text/html; charset=iso-8859-1" />

nein, wenn schon, dann bitte so:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Und ob Jens überhaupt XHTML verwendet und die entsprechende Notation zum Schließen des leeren Elements für ihn überhaupt korrekt ist, wissen wir noch gar nicht.

Ciao,
 Martin

[Felix Riesterer]

Lieber Martin,

nein, wenn schon, dann bitte so:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

*auf-die-Stirn-klopf* ähm... ja. Natürlich. *grml*

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo Jens,

ok, ich versteh nur Bahnhof. Dann bleibe ich wohl doch besser bei Tabellen, das erscheint mir einfacher.

es wäre schade drum. Aber den schwerwiegenden PHP-Syntaxfehler:

Parse error: syntax error, unexpected T_STRING in
  /home/www/.../jenstietze.de_neu/inc/header.inc.php on line 1

auf http://www.jenstietze.de/jenstietze.de_neu/ und den Unterseiten solltest du als allererstes beheben, bevor du die Seite überhaupt zur Diskussion stellst.

Lieber jeti79,
[...]
Felix Riesterer.

Und bitte zitiere sinnvoll, kein TOFU. Danke.

Schönen Sonntag noch,
 Martin

[jeti79]

Hallo,

Der Fehler ist mir eben bei einem Berichtigungsversuch reingerutscht. Ist hoffentlich schon wieder behoben....

Hallo Jens,

ok, ich versteh nur Bahnhof. Dann bleibe ich wohl doch besser bei Tabellen, das erscheint mir einfacher.

es wäre schade drum. Aber den schwerwiegenden PHP-Syntaxfehler:

Parse error: syntax error, unexpected T_STRING in
  /home/www/.../jenstietze.de_neu/inc/header.inc.php on line 1

auf http://www.jenstietze.de/jenstietze.de_neu/ und den Unterseiten solltest du als allererstes beheben, bevor du die Seite überhaupt zur Diskussion stellst.

Lieber jeti79,
[...]
Felix Riesterer.

Und bitte zitiere sinnvoll, kein TOFU. Danke.

Schönen Sonntag noch,
Martin

[Der Martin]

Hi,

Der Fehler ist mir eben bei einem Berichtigungsversuch reingerutscht. Ist hoffentlich schon wieder behoben....

ja, dafür sehe ich jetzt 89 Validierungsfehler.

Hallo Jens,
[...]
Martin

Und immer noch TOFU, pfui!

Ciao,
 Martin

[molily]

Auf dieser Seite: HIER

Ich würde mir dein Problem gerne anschauen, aber da erwartet mich derzeit nur ein PHP-Fehler.

Mathias

[jeti79]

Der Fehler war temporär auf Grund ein Verschlimbesserung, sorry!

Auf dieser Seite: HIER

Ich würde mir dein Problem gerne anschauen, aber da erwartet mich derzeit nur ein PHP-Fehler.

Mathias

[Gunnar Bittersmann]

@@jeti79:

Bevor du dich um marginale Problemchen wie ungewünschte Darstellung im IE kümmerst, erst einmal ein paar gravierende Punkte:

(0) Angabe der Zeichencodierung wurde ja schon genannt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<!--8<-->  
<META NAME="author" content="Jens Tietze">  
<!--8<-->  
<tr><td nowrap align=right>Ihr Name:</td><td>&nbsp;</td>

(1) Möchtest du HTML 4.01 oder XHTML 1.0 verwenden? Mache dich mit den http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschieden vertraut!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<!--8<-->  
<a href="index.php" target="_self" title="hier gehts immer wieder zu Startseite">  
<!--8<-->  
<tr><td nowrap align=right valign=top>Text:<br><i>(1000 Zeichen)</i></td><td></td>

(2) Möchtest du Strict oder Transitional verwenden? Mache dich mit den http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Unterschieden vertraut!

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

(3) Möchtest du die Sprache angeben? Dann aber http://de.selfhtml.org/html/xhtml/unterschiede.htm#lang@title=richtig!

<script type="text/javascript">  
[code lang=javascript] function showHideLayer(id){  
  e = document.getElementById(id);  
  if(e.style.display=="block"){  
   e.style.display = "none";  
  } else {  
   e.style.display = "inline";  
  }  
 }  

~~~</script>[/code]  
  
(4) Die Nichtanzeige einer Box bei aktiviertem JavaScript ohne Möglichkeit der Wiederanzeige hättest du auch einfacher hinbekommen können. ;-)  
  
'`e.style.display=="block"`{:.language-javascript}' wird wohl nie '`true`{:.language-javascript}' ergeben.  
  
Live long and prosper,  
Gunnar

-- 
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)

[jeti79]

@@jeti79:

Bevor du dich um marginale Problemchen wie ungewünschte Darstellung im IE kümmerst, erst einmal ein paar gravierende Punkte:

(0) Angabe der Zeichencodierung wurde ja schon genannt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--8<-->
<META NAME="author" content="Jens Tietze">
<!--8<-->
<tr><td nowrap align=right>Ihr Name:</td><td>&nbsp;</td>

>   
> (1) Möchtest du HTML 4.01 oder XHTML 1.0 verwenden? Mache dich mit den <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschieden> vertraut!  
>   
>   
> ~~~html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

> <!--8<-->  
> <a href="index.php" target="_self" title="hier gehts immer wieder zu Startseite">  
> <!--8<-->  
> <tr><td nowrap align=right valign=top>Text:<br><i>(1000 Zeichen)</i></td><td></td>

(2) Möchtest du Strict oder Transitional verwenden? Mache dich mit den http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Unterschieden vertraut!

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

(3) Möchtest du die Sprache angeben? Dann aber http://de.selfhtml.org/html/xhtml/unterschiede.htm#lang@title=richtig!

<script type="text/javascript">

[code lang=javascript] function showHideLayer(id){
  e = document.getElementById(id);
  if(e.style.display=="block"){
   e.style.display = "none";
  } else {
   e.style.display = "inline";
  }
}

>   
> (4) Die Nichtanzeige einer Box bei aktiviertem JavaScript ohne Möglichkeit der Wiederanzeige hättest du auch einfacher hinbekommen können. ;-)  
>   
> '`e.style.display=="block"`{:.language-javascript}' wird wohl nie '`true`{:.language-javascript}' ergeben.  
>   
> Live long and prosper,  
> Gunnar  
  
Ok, nachdem ich das alles mehr oder weniger durcheinander geworfen habe, musste ich mich wohl doch mal wieder belesen ;)  
Zumindest sagt der validator jetzt, das alles ok ist - der Fehler, dass das <form> nach unten rutscht bleibt leider erhalten.  
  
Die Versteckerei war ein Versuch, nur noch nicht aus dem Quelltext verschwunden ist.

[molily]

Im IE rutscht das Kontaktformular jedoch an eine Stelle, die so aussieht, als wenn Sie sich an der Grafik auf linken Seite orientiert!?

Das liegt am width:100% für die Tabelle. Wenn man einem Element in der rechten Spalte ausdrücklich die gesamte Breite zuweist, schlägt vermutlich der 3-Pixel-Jog zu. Wenn man drei Pixel abzieht, dann führt die Breitenangabe nicht zu einem Clear-Effekt.

Was du machen kannst:

• rechte Spalte mit zoom:1 hasLayout verpassen
• linke Spalte mit margin-right:-3px verschieben
• margin-left der rechten Spalte entsprechend anpassen, d.h. 3px abziehen (wären dann 97px)

Das ganze im Stylesheet nur für IE 6 (z.B. mit Conditional Comments).

Das müsste dann im IE dieselbe Darstellung erreichen und ein width:100% eines Kindelements der rechten Spalte dürfte nicht zu einem Clear führen.

Mathias