Browsererkennung und das Boxenlayout

[Alfred]

@Der Martin

Yo, und das ist nicht das einzige "Problemkind".
Als erstes fällt auf, dass du angeblich HTML schreibst, aber leere »» Tags mit '/>' schließt, wie es eigentlich in XHTML gedacht ist.
Entscheide dich doch bitte für eine Variante. Außerdem wimmelt
dein Quellcode von Fehlern, der Validator kann da ein Lied davon »» singen.

Als erstes das ist nicht mein Quellcode sondern der des Contrexx, das als CMS benutzt wird. Warum das Contrexx solche Dinge macht weiß ich nicht.

Nicht falsch, aber schlechter Stil ist außerdem, dass du einerseits CSS benutzt, andererseits aber noch jede Menge HTML-Attribute zur Formatierung verwendest.

Ich habe leider nicht alles, genauer fast nix, in den einstellungen gefunden. Deshalb ist viel von Hand verändert ...oO vielleicht nicht die beste Lösung.

So, nun zu dem, was du als Problemkind siehst.

<p class="search">
<form action="?section=search" method="post">
<input class="search" name="term" value="" maxlength="100" />
<input class="sbutton" value="Suchen" name="Submit" type="submit">
</form>
</p>

Auf die Formularelemente darin (Textfeld, Button) trifft folgender »» Selektor zu:

input,select,textarea {
    top:10px;
    right:10px;
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    COLOR: #000000;
    font-size: 12px;
    font-color: #000000;
   background-color: #d3d3d3;
}

Die Eigenschaften top und right haben keine Wirkung, weil die  Elemente weder absolut, noch relativ positioniert sind. Warum du alle
Rahmenlinien separat definierst, anstatt sie zusammenzufassen, wissen die Götter, und weiter ist nichts drin, was die Position der
Elemente festlegt. Sie werden also im regulären Textfluss angezeigt.

Dann haben wir noch den Selektor für die Klasse "search", der auf »» den umschließenden Absatz sowie auf das Textfeld zutrifft.
Allerdings ist er hochgradig fehlerhaft und muss daher komplett ignoriert werden:

.search {
<!-- Browser erkennen und Boxlayout anpassen -->
  <script type="text/javascript">
  [...]
  </script>
}

Weder HTML-Kommentare noch Javascript hat irgendwas in CSS verloren!

So, nachdem wir nun festgestellt haben, dass die Position des Suchformulars nirgends definiert ist, ergibt sie sich also aus dem umgebenden HTML-Code: Das Formular ist in einer Tabelle eingebettet, die zur Positionierung ebenfalls keine konkreten Angaben macht, also erscheint der Inhalt vertikal zentriert (Standardausrichtung für td).  Und genau da erscheinen die Felder bei mir auch sowohl im IE als auch  im Firefox: Ungefähr auf halber Höhe der Hintergrundgrafik.
Sollen sie unten stehen, solltest du der umgebenden Zelle vielleicht ein vertical-align spendieren. Das können die Browser alle ungefähr gleich gut, eine Unterscheidung wäre dann gar nicht mehr nötig. Toll, was?

Warum antwortest du mit so einem seltsamen unterton? Ich habe zwar um Hilfe gebeten aber ich lasse mich nicht so behandeln. du hast bestimmt schon davon gelesen das an vielen monitoren Menschen sitzen und keine Maschinen.

Aber unabhängig davon würde ich dir dringend empfehlen, wenigstens »» die Fehler im HTML zu beseitigen, vom CSS ganz zu schweigen. Über »» eine sinnvolle Strukturierung des Dokuments will ich mich auch gar »» nicht erst auslassen ...

Meinst du das das w3c vorschlägt alle schlüßelwörter in Großbuchstaben zu schreiben?

@Struppi

Das Problem dürfte eher der  Quellcode an sich sein. Wenn der CSS Code ähnliche Qualitäten hat, solltest du lieber veruschen dieses Problem zu lösen, anstatt auf dieser Basis einen workaround zu finden.

Darf man denn jetzt nicht mal mehr Fehler machen? Was ist hier los?