XHTML Strict: Problem mit <input> und Zeilenumbruch

[DeltaB]

Guten Tag Forengemeinde,

ich bin recht neu im HTML-"Geschäft" und erstelle gerade ein Theme für mein privates Wordpress-Blog. Ein Feature dieses (sonst sehr schlichten) Themes soll sein, dass je nach dem, welche Seite angezeigt wird, der entsprechende Eintrag in der Navigation markiert wird. Ist blöd zu beschreiben, deshalb ein Bild meiner Navigationsleiste:



In dem Bild befindet sich der Besucher gerade auf der Seite "Archiv Mai 2011", was daran erkennbar ist, dass vor diesem Menüpunkt ein Pfeil statt eines X zu sehen ist.

Realisiert werden die Menüpunkte als Liste. Hierbei bekommt der gerade aktive Menüpunkt (wird über PHP und Wordpress-Funktionen ermittelt) die Klasse "current_page_item". Diese Klasse bekommt im style.css ein entsprechendes list-style-image zugewiesen. In meinem Fall also einen Pfeil für die Klasse "current_page_item"; Listenpunkte ohne spezielle Klasse bekommen das X als list-style-image.

Soweit hoffentlich verständlich erklärt.

Dieser Effekt soll nun auch mit der Suchfunktion laufen, wird also gerade eine Suchseite angezeigt, soll vor dem Suchfeld ein Pfeil statt eines X stehen. Genau hier gibt es Probleme. Zunächst einmal der von mir verwendete Code:

<h3> Suche </h3>
<ul>
   <?php if ( is_search() ) { ?>
      <li class="current_page_item"> <?php include (TEMPLATEPATH . '/searchform.php'); ?> </li>
   <?php } else { ?>
      <li> <?php include (TEMPLATEPATH . '/searchform.php'); ?> </li>
   <?php } ?>
</ul>

(Das "if (is_search() )" ist eine Wordpress-Funktion, bitte darüber nicht wundern. Ich überprüfe damit lediglich, ob derzeit eine Suchseite angezeigt wird oder nicht um so die entsprechende Klasse und damit wiederrum das entsprechende list-style-image zu setzen (X oder Pfeil))

Und der Code der searchform.php:

<form class="suche" method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input class="suche" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
    <input type="hidden" id="searchsubmit" />
</form>

Der ganze Spaß funktioniert so, wie er hier steht.

Aber: Um gleich auf die richtige Karte zu setzen möchte ich nach XHTML Strict arbeiten und lasse meinen Code durch den Validator laufen. Dieser meldet allerdings zu den beiden <input>-Tags jeweils einen Fehler:

document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Zum einen ist mir nicht ganz klar, warum überhaupt eines der genannten Start-Tags benötigt wird. Man wird sich dabei ja irgendwas gedacht haben, nur was?

Viel entscheidender aber ist für mich natürlich der Fehler, der auftritt, wenn ich mich an diese Vorschrift halte und einen entsprechenden Tag setze. Dann nämlich machen manche Browser (IE 9, FF 4) einen Zeilenumbruch vor das Suchfeld, das list-style-image (das "x" oder der Pfeil) sind dann nicht mehr vor dem Suchfeld sondern darüber. Es ist dabei egal, ob ich "p", "hx", "div", "pre" oder "fieldset" verwende. Auch hierzu ein Bild:



Die Browser scheinen das unterschiedlich zu interpretieren, Chrome 11, Opera 11 und Safari 5 machen diesen Umbruch nicht, IE9 und FF4 wie erwähnt leider schon. Dummerweise also ausgerechnet die Browser mit hohem Marktanteil...

So ist zwar der Validator zufrieden aber die Darstellung ist natürlich nicht akzeptabel.

Meine Frage ist nun, wie ich dieses Verhalten abstellen kann. Gibt es eine CSS-Eigenschaft, die den Umbruch verhindert? Oder ein HTML-Tag? Oder muss ich an die Sache ganz anders ran? Vielleicht ohne Liste? Aber wie dann (mit vertretbarem Aufwand)?

Ich bedanke mich im Voraus bei allen, die sich die Arbeit machen, mir einen hilfreichen Kommentar zu posten.

Beste Grüße,
DeltaB

PS: Googeln hat mich auch nach längerer Suche nicht weitergebracht... Kann natürlich sein, dass ich mit den falschen Begriffen gesucht habe, dann tut es mir Leid und es war keine böse Absicht ;)

 

[ka9de]

Sind inputs in Listen erlaubt?
Probier mal das input in ein div zu packen und diesen per display:block; zu definieren.. ob das alles erlaubt ist weiß ich aber nicht, ist zu früh

edit: Ja, natürlich display:inline; ;)

 

[DeltaB]

Sind inputs in Listen erlaubt?

AFAIK ja. Laut SELFHTML darf <li> inline-Elemente enthalten, zu diesen zählt auch <input>.

Probier mal das input in ein div zu packen und diesen per display:block; zu definieren..

Du bist mein Held des Tages! Vermutlich meintest du display:inline und nicht display:block?! Das ist nämlich des Rätsels Lösung! Hätte ich auch selbst draufkommen können... Da sieht man mal, wie wenig vertraut ich noch mit HTML und CSS bin...

Vielen Dank und einen schönen Tag!

Beste Grüße,
DeltaB


PS: Für eventuelle Nachfolger, die diesen Post lesen und das gleiche Problem haben hier der Vollständigkeit halber der korrekte Code:

searchform.php

<form class="suche" method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
	<div id="inl">
	<input class="suche" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
	<input type="hidden" id="searchsubmit" />
	</div>
</form>

und im style.css

#inl {display:inline;}

PPS: Ich erlaube mir, meine obige Frage (rein aus Interesse, das Problem ist ja gelöst) selbst zu zitieren:

Zum einen ist mir nicht ganz klar, warum überhaupt eines der genannten Start-Tags benötigt wird. Man wird sich dabei ja irgendwas gedacht haben, nur was?

Vielleicht will mir ja noch jemand Erleuchtung bringen ;)

 

[derMartin71]

Moin Moin,

Aber: Um gleich auf die richtige Karte zu setzen möchte ich nach XHTML Strict arbeiten und lasse meinen Code durch den Validator laufen. Dieser meldet allerdings zu den beiden <input>-Tags jeweils einen Fehler:

Auch wenn das einige hier im Forum anders sehen, denke ich nicht, dass XHTML Strict heute noch die richtige Karte ist, oder jemals war. Ich würde einfach den "HTML5" <!DOCTYPE html> verwenden. Es macht vieles einfacher und die Browser machen da auch keine Probleme, solange Du nicht die neuen HTML5 Elemente verwendest.

Viele Grüße
/martin

 

[mermshaus]

Um noch kurz das Problem mit dem „Zeilenumbruch“ zu benennen. Das ist sicherlich einfach die margin-Eigenschaft des p-Elements (siehe #demo1). Die kannst du per CSS raushauen (#demo2).

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">

ul, li { margin: 0; padding: 0; }
li { margin-left: 20px; }

#test1, #test2 {
    border: 1px solid;
}

#test2 p { margin: 0; }

        </style>
    </head>

    <body>

        <h3> Suche </h3>

        <div id="test1">
            <ul>
                <li>
                    <form class="suche" method="get" id="searchform" action="">
                        <p><input class="suche" type="text" value="blub" name="s" id="s" />
                        <input type="hidden" id="searchsubmit" /></p>
                    </form>
                </li>
            </ul>
        </div>


        <div id="test2">
            <ul>
                <li>
                    <form class="suche" method="get" id="searchform" action="">
                        <p><input class="suche" type="text" value="blub" name="s" id="s" />
                        <input type="hidden" id="searchsubmit" /></p>
                    </form>
                </li>
            </ul>
        </div>

    </body>

</html>

Auf PHP_SELF solltest du verzichten. Ein leeres action-Attribut (action="") erfüllt in der Regel denselben Zweck.

Suche nach „php_self xss“.

 

[DeltaB]

Auch wenn das einige hier im Forum anders sehen, denke ich nicht, dass XHTML Strict heute noch die richtige Karte ist, oder jemals war. Ich würde einfach den "HTML5" <!DOCTYPE html> verwenden.

An dem was du sagst ist sicher was dran... Andererseits: Ich bin Anfänger, XHTML ist gut dokumentiert, es gibt 1000 Beispiele und einen zuverlässigen Validator. Sicher ist HTML 5 die Zukunft - aber für den Moment verlasse ich mich auf das Bewährte...

Um noch kurz das Problem mit dem „Zeilenumbruch“ zu benennen. Das ist sicherlich einfach die margin-Eigenschaft des p-Elements (siehe #demo1). Die kannst du per CSS raushauen (#demo2).

Danke für dein Codebeispiel... Ich verstehe, denke ich, was du meinst und es funktioniert ja auch. Mein Denken ging nur so weit: Google -> <p>-Tag -> ist dazu da, einen Textabsatz einzuleiten -> genau das, was ich nicht will -> abgehakt. Dass man da per CSS basteln kann, so weit habe ich nicht gedacht...

Auf PHP_SELF solltest du verzichten.

Danke für den Tipp, werde ich selbstredend befolgen. An was man alles denken muss ;)

 

[DeltaB]

Also nochmal danke für die schnellen, hilfreichen Antworten.

Eine Frage stellt sich mir noch, ist zwar etwas OT aber einen eigenen Thread braucht es ja irgendwie auch nicht... Bin ich safe, wenn ich statt

action="<?php echo $_SERVER['PHP_SELF']; ?>"

die htmlspecialchars-Funktion verwende, also

action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"

schreibe? Bei heise Security gibt es eine entsprechende Meldung, die dies empfiehlt. Diese ist allerdings von 05/2007 und damit eventuell schwer veraltet.

Bei HTML Form Guide wird htmlentities() (das wohl genauso wie htmlspecialchars wirkt) ebenfalls als ein taugliches Workaround beschrieben.

Daneben: In Wordpress selbst (nicht im Theme, und nur dieses schreibe ich ja selbst) kommt PHP_SELF mehrmals vor. Warum ist es im Theme gefährlich und offenbar auf den anderen Seiten nicht? Weil diese nicht von jedermann direkt aufgerufen werden können?

 

[mermshaus]

htmlspecialchars und htmlentities sollten Cross-Site-Scripting-Attacken an der Stelle ebenfalls verhindern, ja.

Generell ergibt sich nur eine Angriffsmöglichkeit, wenn der Wert von PHP_SELF ungefiltert in HTML-Code eingesetzt wird. Wird der Wert nur intern verwendet, aber nicht direkt oder indirekt ausgegeben, ist das unproblematisch.