CSS Padding-Effekt bei verschachtelten Tabellen

[raven16]

Guten Morgen


Diesen Effekt habe ich, wenn ich 2 Tabellen ineinander verschachtelt habe.
Habe in der CSS-Datei schon folgendes aus Prinzip gemacht:

*{
	margin: 0px;
	padding: 0px;
}

Hat jemand eine Idee, wie ich die beiden Zeilen bündig bekomme?

 

[echoDave]

Zeig doch mal bitte den Code, den ich sehe da keinen Grund für 2 Tabellen.
Für mich siehts nach einem stinknormalen Formular mit einer Tabelle aus.

 

[raven16]

PHP/HTML

echo'
<form action="" method="post">
<label class="text">Pflichtfelder</label>
<table style="border-top:1px solid #dedede;padding-top:10px;width:380px;">
<tr>
	<td>
		<label class"text">Nachname:</label>
	</td>
	<td>
		<input tabindex="7" class="form1" style="width:207px;" type="text" maxlength="20" name="nachname" value="'.$_POST['nachname'].'" />
	</td>
</tr>
<tr>
	<td>
		<label class"text">Klasse:</label>
	</td>
	<td>
		<table>
			<tr>
				<td>
					<select tabindex="8" class="select1" style="width:150px;" name="klassentyp">
						<option value="false">Bitte wählen</option>';
						echo'<option '; if($_POST['klassentyp']=='DT') echo'selected';echo'>DT</option>';
						echo'<option '; if($_POST['klassentyp']=='ITA') echo'selected';echo'>ITA</option>';
						echo'
					</select>
				</td>
				<td>
					<input tabindex="9" maxlength="1" class="form1" style="width:20px;" name="schuljahr" value="'.$_POST['schuljahr'].'" />
				</td>
				<td>
					<label class="text"> . </label>
				</td>
				<td>
					<input tabindex="10" maxlength="1" class="form1" style="width:20px;" name="klasse" value="'.$_POST['klasse'].'" />
				</td>
			</tr>
		</table>
	</td>
</tr>
</table>
</form>';

CSS

*{
	margin: 0px;
	padding: 0px;
}

html,div, span, a, table, td, form, img, li,label, textarea {
   font-family: Verdanna, Arial, Genva, Helvetica;
   text-decoration: none;
   border: none;
   border-style:none;
}

 

[echoDave]

Mach die zweite Tabelle weg, füge den select und die zwei Inputfelder einfach nacheinander in den TD ein.
Das sollte ausreichen.

Also so:

<td>
     <select tabindex="8" class="select1" style="width:150px;" name="klassentyp">
         <option value="false">Bitte wählen</option>';
         [...]
     </select>
     <input tabindex="9" maxlength="1" class="form1" style="width:20px;" name="schuljahr" value="'.$_POST['schuljahr'].'" />
     <label class="text"> . </label>
     <input tabindex="10" maxlength="1" class="form1" style="width:20px;" name="klasse" value="'.$_POST['klasse'].'" />
</td>

Grüß,

David

 

[raven16]

Das hab ich vorher auch gemacht, aber dann ist folgendes Problem:
Die Auswahlbox und die zwei Textboxen bei der Zeile "Klasse" sind dann nicht mehr horizontal gleich ausgerichtet.

Wie in diesem Beispiel:

Füge ich die Komponenten in Zellen einer Tabelle ein, sind sie ausgerichtet. Problem ist, wenn ich z.B. margin-top verwende, dass die Textboxen je nachdem von verschiedenen Browsern unterschiedlich behandelt werden und dann trotzdem wieder nicht ausgerichtet sind.

Wenn du dafür dann auch eine gute Lösung hast, wäre ich dir sehr dankbar

 

[echoDave]

Pass doch die Höhe der Textboxen bzw. des Optionsfeldes an, am besten mit der Angabe der Schriftgröße.
Beim Button im dem letzten Bild sieht es genauso aus, kannst bei Buttons auch mittels des height-Paremeter arbeiten.


Grüße,

David

 

[raven16]

Die Höhe habe ich schon angepasst über CSS
Den Button hab ich 2px größer gemacht wie die Textbox.

Der Button ist ja auch optisch genauso groß wie die Textbox nur ist halt 1-2px zu weit oben^^

 

[T0a5tbr0t]

Input Felder sind immer lästig bei der Formatierung, da die Browser unterschiedliche Standard-formatierungen haben. Guck dir die Elemente in den verschiedenen Browsern mit Entwickler-tools (Chrome hat die immer dabei, bei Firefox würde ich Firebug nehmen) an, da kann man auch die Formatierungen der Browser anzeigen lassen.
Unterschiede gibt es häufig bei "box-sizing", was bei manchen Input-Elementen auf "border-box" steht und nicht auf "content-box". Dadurch kommen die Größenunterschiede, auch wenn man height gleich angibt.
Gebe einfach allen Input's den gleichen "box-sizing" Wert und es sollte gehen.

 

[raven16]

Danke das hört sich sehr vielversprechend an. Werde ich mal ausprobieren

 

[UnKnOwN_86]

Ich tendiere eher zur annahme dass du den
border-collapse: collapse; style auf die tables anwenden müsstest.

oder das border-spacing auf 0px setzen.