Probleme mit Doctype und CSS

[exciter]

Hallo,

ich wäre sehr froh wenn mir jemand helfen könnte. Es geht um folgende Seite:

http://horrorcounter.cybton.com/aw/index.php

Wie man sieht, XHTML Transitional. Leider stellen Firefox und IE den Text unter dem Formular nur mit einigem Abstand dar, ich hab schon alles versucht aber nichts geht!
Der Text soll direkt ohne Abstand unter dem Textfeld stehen.

Opera 8 macht es genauso wie ich es gerne hätte...

Das CSS ist hier:

http://horrorcounter.cybton.com/aw/css.css

Wäre für Lösungsvorschläge sehr dankbar!

 

[Maik]

Korrigiere in dem Online-Dokument mal den Pfad zur CSS-Datei

 <link rel="stylesheet" type="text/css" href="http://localhost/ht/aw//css.css" />

 

[exciter]

Gesagt, getan, aber ändern tut es natürlich nichts.

Woran liegt das jetzt? Macht das DIV oder das Formular den Abstand zum Text? Aber in #searchlinks hab ich ja alle Abstände schon auf 0 gestellt und das Formular ist auch inline...

 

[Maik]

Das Formular befindet sich aber in einem weiteren DIV ohne CSS-Formatierungen.

Zudem sollte das body-Element im Stylesheet die CSS-Eigenschaft padding:0 erhalten.

 

[exciter]

Ich glaub ich dreh bald durch - nichts!
Hab dem DIV, welches das Formular umschliesst auch noch margin und padding 0 gegeben.
Kann es sein, dass es an der Verschachtelung meiner DIVs liegt?

An dem Brocken habe ich jetzt schon 2 Tage zu knabbern, bisher ohne Lösung. Wieso nur macht Opera es richtig?

 

[Maik]

Es liegt an der Höhenangabe (= 32px) gepaart mit dem Innenabstand nach oben (= 9px) für das Eingabefeld .searchform. Diese CSS-Eigenschaften werden nach dem Box-Modell addiert und ergeben somit eine Gesamthöhe (= tatsächliche Höhe) von 41px, was zu dem Abstand nach unten führt.


Siehe auch CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell.

 

[exciter]

Jetzt geht mir ein Licht auf... also ist da wahrscheinlich nichts zu machen gelle?

 

[Maik]

Zumindest sollten für ein HTML-Element Weiten- / Höhenangaben mit einem Innenabstand nicht kombiniert werden, wie in deinem Fall mit padding-top: 9px, da die Browsers das Box-Modell unterschiedlich interpretieren (siehe Opera).

 

[exciter]

Danke für den Tipp und deine Hilfe!
Mal schauen wie ich es jetzt mache.

 

[Maik]

Probier mal folgendes:

.searchform {
font: bold 12px Verdana;
color: #808080;
height: 32px;
line-height: 32px;
width: 304px;
margin: 0px;
padding: 0px;
background-image: url(http://localhost/ht/aw/g/bg-search-304x32.gif);
background-repeat: repeat-x;
vertical-align: top;
}