• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

Checkbox in der Tabelle mittig machen; Problem mit margin, padding und font-size

Cyperfriend

Der ohne Avatar

Registriert
14 Juli 2013
Beiträge
1.123
Ich möchte in einer Tabelle eine Checkbox machen. Sieht dann so aus:
[src=html5]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="style.css">

<form action="#" method="post">
<table border="1">
<tr>
<td><input type="checkbox" name="test"></td>
<td>Test</td>
</tr>
</table>
</form>

</body>
</html>[/src]

[src=css]@charset "utf-8";
/* CSS Document */

* {
/* Außenabstand zum Browserrand */
margin:0;
/* Innenabstand zum Browserrand */
padding:0;
}[/src]
Bis dahin sieht noch alles gut aus
Anhang anzeigen 53567

Wenn ich nun die CSS-Datei wie folgt abändere
[src=css]@charset "utf-8";
/* CSS Document */

* {
/* Außenabstand zum Browserrand */
margin:0;
/* Innenabstand zum Browserrand */
padding:0;
/* Schriftgröe */
font-size:12px;
}[/src] sieht das Ganze plötzlich so aus:
Anhang anzeigen 53568

Wenn ich nun
[src=css] /* Außenabstand zum Browserrand */
margin:0;
/* Innenabstand zum Browserrand */
padding:0;[/src]

entferne ist alles wieder gut. Ich verstehe zum Einen die Zusammenhänge nicht und zum Anderen weiß ich nicht, wie ich dem Problem begegnen kann.
Ich bitte daher um Hilfe.
 

KingJamez

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
*{} ist der Universal Selector, der gilt für alle Elemente. Wenn du mit *{} den margin entfernst, dann eben für alle Elemente.
Du kannst dir in den DevTools deines Browsers den UserAgentStylesheet ansehen. Bei mir (Chromium MacOS) hat eine Checkbox.

[src=css]
input[type="radio" i],
input[type="checkbox" i] {
background-color: initial;
cursor: default;
margin: 3px 0.5ex;
padding: initial;
border: initial;
}
[/src]
 

Jester

★★★★☆ (Kasparski)

Registriert
1 Dez. 2014
Beiträge
6.057
Ort
Code Azure
@Cyperfriend: Hier kommen mehrere Punkte zusammen, die eigentliche Ursache ist die line-height, also die definierte Zeilenhöhe. Ohne die 12px-Festlegung ist der Standard je nach Browser 12pt und die Zeilenhöhe 125-130% der font-size, also mit freiem Raum über und unter der Schrift.

In der Standard-Textgröße ist der leere Raum über der Schriftoberkante so hoch, dass die Tabellenzelle die Checkbox vertikal positionieren kann, der freie Raum der Zeilenhöhe über der Schrift dehnt also die Zellen nach oben aus.

Du kannst das lösen, indem Du der TD eine line-height zuweist, mit der es klappt, Standard wären 14 oder 15px bei 12px Schriftgröße - oder als dirty workaround einfach line-height:0 festlegen, so lange das nicht mit mehrzeiligem Text kollidiert.

Nun wird sich Dir direkt die nächste Frage stellen: woher kommt der leere Raum unter Checkbox und Text?
Das liegt daran, dass die Checkbox ein Inline-Element ist und eine Tabellenzelle als vertikale Basis-Ausrichtung 'baseline' hat - der entstehende Raum ist grundsätzlich für Textunterlängen gedacht. Gib ihr display:block und der Abstand nach unten ist weg.
 

thom53281

SYS64738
Teammitglied

Registriert
14 Juli 2013
Beiträge
6.908
*{} ist der Universal Selector, der gilt für alle Elemente. Wenn du mit *{} den margin entfernst, dann eben für alle Elemente.
So ist es. Deswegen würde ich das auch eher vermeiden wollen. Würde daher eher margin/padding auf html/body bzw. vorhandene Elemente anwenden. Auch wenn das ein wenig mehr Aufwand ist.

Ansonsten vielleicht noch eine Idee (das CSS-Schnippsel weiter unten, nicht das HTML-Attribut):
https://www.w3schools.com/tags/att_td_valign.asp

Kann das aber aktuell nicht mit dem obigen Beispiel ausprobieren.
 
Oben