# Probleme mit Doctype und CSS



## exciter (18. September 2005)

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 (18. September 2005)

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 (18. September 2005)

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 (18. September 2005)

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 (18. September 2005)

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 (18. September 2005)

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 (18. September 2005)

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


----------



## Maik (18. September 2005)

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 (18. September 2005)

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


----------



## Maik (18. September 2005)

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;
}
```


----------



## exciter (18. September 2005)

Oh Mann fast!! Abstand ist jetzt ok, aber Firefox "paddet" den Text im Eingabefeld nicht mehr... Internet Explorer und Opera machen es "richtig".
Hast du dafür vielleicht noch einen Vorschlag?


----------



## Maik (18. September 2005)

Leider nicht .....


----------



## exciter (18. September 2005)

Mal sehen, vielleicht krieg ich noch ein Workaround hin... sowas kostet immer die meiste Zeit!


----------



## Maik (18. September 2005)

good luck


----------



## exciter (19. September 2005)

Hätte schon eine Idee.
Ich lege den Rahmen des Suchfeldes als Hintergrund für ein DIV fest und positioniere dann einfach das INPUT-Feld ohne Rahmen und weißem Hintergrund relativ so hinein dass es passt.


----------

