Warum greift vertical-align hier nicht?

[Lukas.]

Guten Morgen,

ich habe eine Tabelle, in deren letzter Spalte eine Checkbox und ein Edit-Icon stehen sollen. Aber die beiden stehen nicht in einer Höhe nebeneinander. Ich dachte, mittels vertical-align ist das Thema schnell erledigt, aber nixda:

  <table>
  <tr>		 
<TD><img src="./page_white_edit.png" border="0" style=\"vertical-align:-5px\">&nbsp;
<input type=checkbox name="test"></TD>
  </tr>
  </table>

Warum hat hier vertical-align keinen Einfluss?

L.

[MrMurphy1]

Hallo

Die Schreibweise für das Inline-CSS ist falsch. Probier mal

style="vertical-align: -5px;"

Gruss

MrMurphy

[Lukas.]

Hallo

Die Schreibweise für das Inline-CSS ist falsch. Probier mal

style="vertical-align: -5px;"

Hi MrMurphy,

danke, jetzt gehts.

L.

[Gunnar Bittersmann]

@@Lukas.

  <table>
  <tr>		 
<TD><img src="./page_white_edit.png" border="0" style=\"vertical-align:-5px\">&nbsp;
<input type=checkbox name="test"></TD>
  </tr>
  </table>

Warum hat hier vertical-align keinen Einfluss?

Wegen des Syntaxfehlers im HTML? Die Backslashes sind falsch.

Warum -5px? Wo kommen die her? Magic numbers sind tunlichst zu vermeiden. Was immer du vorhast, mach es anders.

Die Checkbox hat keine Beschriftung, muss aber eine haben.

LLAP 🖖

[Matthias Scharwies]

Servus!

Warum -5px? Wo kommen die her? Magic numbers sind tunlichst zu vermeiden. Was immer du vorhast, mach es anders.

Ich hab mal einen Wiki-Eintrag anglegt: Glossar:Magic Number

Wenn ihr noch was findet, bitte hinzufügen /umschreiben!

Herzliche Grüße

Matthias Scharwies

[Lukas.]

Hi,

Wenn ihr noch was findet, bitte hinzufügen /umschreiben!

z.b. Techniken, die mn zu umgehen?

L.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Checkbox hat keine Beschriftung, muss aber eine haben.

Und natürlich auch: Das Bild heat keinen Alterntativtext, muss aber einen haben.

Das Bild (bzw. dessen Alterntativtext) sind die Beschriftung für die Checkbox? Dann kannst du Bild und Checkbox ins label tun:

<label>
  <img src="…" alt="…"/>
  <input name="…"/>
</label>

oder die Verknüpfung per for und ID herstellen:

<label for="my-checkbox">
  <img src="…" alt="…"/>
</label>
<input name="…" id="my-checkbox"/>

Warum -5px? Wo kommen die her? Magic numbers sind tunlichst zu vermeiden. Was immer du vorhast, mach es anders.

Ich denke, du willst das Bild mittig zur Checkbox ausrichten? Dann einfach per Schlüsselwort vertical-align: middle. Siehe CodePen.

LLAP 🖖

[Gunnar Bittersmann]

@@Lukas.

<TD><img src="./page_white_edit.png" border="0" style=\"vertical-align:-5px\">&nbsp;
<input type=checkbox name="test"></TD>

Anstelle des NBSP kannst du den Umbruch besser mit CSS verhindern:

td
{
	white-space: nowrap;
}

LLAP 🖖