Brett vorm Kopf: 2 Formularelemente in td, vertikale Abstände

[Elya]

Hallo,
ich hänge immer wieder an diesem scheinbar trivialen Problem und finde diesmal auch keinen Workaround (vielleicht ist es aber wirklich trivial und ich bin aus der Übung...)

Ein select- und ein input type="image" sollen nebeneinander in einer td stehen, und zwar ohne jeden vertikalen oder horizontalen Abstand. Der Code dazu sieht so aus:

CSS:

  
  
form, input, select, fieldset, td {margin:0;padding:0;border:none;}  
    table {width:95%;}  
    td {border:1px solid #ccc;height:24px;}  
    form {display:inline;}  
    select {height:20px;}  

HTML:

  
<table cellspacing="0" cellpadding="0">  
      <tr>  
        <td>  
          <form action="#">  
            <fieldset>  
              <select>  
               <option value="Auswahl">Auswahl</option>  
              </select>  
              <input type="image" src="btn_go_test.gif" value="starten" />  
            </fieldset>  
          </form>  
        </td>  
       </tr>  
    </table>  

Anschauen kann man das auf dieser Testseite.

Das Problem: Sobald das Submit-Image, das genau 24 px hoch ist (der rote Rand ist zur Veranschaulichung *innerhalb* des Bildes) in die td gesetzt wird, entsteht oben über der Select (oder unterhalb des Bildes, wie man's nimmt) ein Abstand, den ich nicht abgestellt bekomme (IE, FF, Opera einmütig). Höhenangaben in td haben ab 24 px abwärts keine Auswirkung mehr. Den html-Code ohne Absätze hintereinander zu schreiben, macht hier keinen relevanten Unterschied. Sämtliche Abstände innen und außen stehen auf 0. Rumprobieren mit negativen margins führte auch zu keinem Ergebnis. Ebensowenig Angaben zu vertical-align. Und: ja, ich brauche unbedingt die Tabelle, da tabellarische Daten mit Hilfe des selects spaltenweise sortiert werden sollen, der Code ist schon maximal auf das Einzelproblem reduziert.

Wo kommt der blöde Abstand her?

Es kommt mir so vor, als sei dieses Problem uralt, ich stehe aber grade ziemlich auf dem Schlauch. Wer kann mir runterhelfen?

Danke für Eure Hilfe.

Gruß aus Köln-Ehrenfeld,

Elya

[wahsaga]

hi,

Rumprobieren mit negativen margins führte auch zu keinem Ergebnis. Ebensowenig Angaben zu vertical-align.

Hilft auch vertical-align:bottom für das image-input nicht?

Btw: Schickst du den IE 6 absichtlich in den Quirks-Mode? (XML-Prolog)

gruß,
wahsaga

[Elya]

Hallo wahsaga,

Hilft auch vertical-align:bottom für das image-input nicht?

Doch! Auf die idee, es dem input zu geben, bin ich nicht gekommen, ich gebe vertical-align immer der umgebenden Box - hab aber gerade geschaut, auf inline-Elemente geht auch. Kurios.

Danke Dir (wieder mal ;-))!

Btw: Schickst du den IE 6 absichtlich in den Quirks-Mode? (XML-Prolog)

ja, dann habe ich die IEs mit ihren Macken mehr oder weniger in einem Rutsch abgefrühstückt ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[wahsaga]

hi,

Doch! Auf die idee, es dem input zu geben, bin ich nicht gekommen, ich gebe vertical-align immer der umgebenden Box - hab aber gerade geschaut, auf inline-Elemente geht auch. Kurios.

Nö, kaum kurios. Bilder werden auf der baseline des (imaginären) Textinhaltes der Zeile positioniert, es wird also Platz für die Unterlängen von Buchstaben wie g oder p reserviert - so lange du genau das nicht (beispielsweise) durch eine andere Angabe zu vertical-align änderst.

gruß,
wahsaga