Tabelle wird unerwartet gesteckt

[romero]

Hallöchen an Euch,

ich habe Tabelle mit einem bestimmter Weite aber sie wird beim "Erstellen" (mittels Javascript) gestreckt, um 4px.

Das Ganze sieht wie folgt aus:

			<tr class="Zeile22" id="div-container">  
				<td class="Spalte1"></td>  
				<td colspan=10 bgcolor=#FFFFFF class="Spalte27"><div id="msgs" class="rollbalken"></div></td>  
				<td class="Spalte1"></td>  
			</tr>

die CSS-Anweisung sieht so aus:

.rollbalken {  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 overflow:scroll;  
 overflow-x:hidden;  
}  
  
td.Spalte27 {  
 width:1108px;  
 margin:0px;  
 padding:0px;  
}

In dieser Spalte wird dann die Tabelle eingefügt, nachdem sie mittels Javascript erstellt wurde. Unter der id="div-container" wird nur die Höhe errechnet. Sie spielt also keine Rolle.

Nun erstelle ich die Tabelle, was wie folgt ausschaut:

	table_untersch = document.createElement( "table" );  
	table_untersch.id = "duda";  
	table_untersch.className = "table3";  
	table_untersch.cellspacing = "2px";  
	tbody_untersch = document.createElement( "tbody" );  
	tbody_untersch.id = "Tabellenkopf_Unterschiede_" + Ident;  
  
	table_untersch.appendChild( tbody_untersch );  
	document.getElementById( "msgs" ).appendChild( table_untersch );

...

	for( var i = 0; i < UnterschiedeMerkmal.length; i++ )  
	{  
		var vorhanden = UnterschiedeVorhanden[i];  
		var neu = UnterschiedeNeu[i];  
		var merkmal = UnterschiedeMerkmal[i];  
  
		tr_untersch = document.createElement( "tr" );  
		td0_untersch = document.createElement( "td" );  
		td1_untersch = document.createElement( "td" );  
		td2_untersch = document.createElement( "td" );  
		td3_untersch = document.createElement( "td" );  
		td4_untersch = document.createElement( "td" );  
		td5_untersch = document.createElement( "td" );  
  
		tr_untersch.height = "30";  
  
		tr_untersch = document.getElementById( "Tabellenkopf_Unterschiede_" + Ident ).appendChild( tr_untersch );  
  
		TAB_untersch = document.getElementById( "Tabellenkopf_Unterschiede_" + Ident );  
  
		td00_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td0_untersch );  
		td11_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td1_untersch );  
		td22_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td2_untersch );  
		td33_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td3_untersch );  
		td44_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td4_untersch );  
		td55_untersch = TAB_untersch.getElementsByTagName( "tr" )[k].appendChild( td5_untersch );  
		  
		td00_untersch.width = "5px";  
		td11_untersch.width = "275px";  
		td11_untersch.className = "Zusatzliste";  
		td11_untersch.align = "left";  
		td22_untersch.width = "65px";  
		td22_untersch.align = "center";  
		td22_untersch.className = "Zusatzliste";  
		td33_untersch.width = "275px";  
		td33_untersch.className = "Zusatzliste";  
		td33_untersch.align = "left";  
		td44_untersch.width = "65px";  
		td44_untersch.className = "Zusatzliste";  
		td44_untersch.align = "center";  
		td55_untersch.width = "325px";  
		td55_untersch.className = "Zusatzliste";  
		td55_untersch.align = "left";  
  
		tr_untersch.getElementsByTagName( "td" )[0].innerHTML = "";  
		tr_untersch.getElementsByTagName( "td" )[1].innerHTML = vorhanden;  
		tr_untersch.getElementsByTagName( "td" )[2].innerHTML = "-";  
		tr_untersch.getElementsByTagName( "td" )[3].innerHTML = neu;  
		tr_untersch.getElementsByTagName( "td" )[4].innerHTML = "";  
		tr_untersch.getElementsByTagName( "td" )[5].innerHTML = merkmal;  
  
		k++;  
	};

Die Tabelle hat einen Spaltenabstand (cellspacing) von 2 Pixel. Und wenn ich diese Werte der einzelnen Spalten mit den Spaltenabstand zusammenrechne, ergibt sich 1024 Pixel. Wenn ich die Weite der einzelnen Zeilen mittels alert( tr_untersch.offsetWidth ); ausgebe, erhalte ich ebenfalls 1024px.

Nun habe ich noch der Tabelle eine CSS-Anweisung gegeben (s.o. className="table3"). Die sieht dann so aus:

.table3 {  
 width:1028px;  
 border:2px;  
 border-style:outset;  
 border-color:lightgrey;  
 margin-left:25px;  
}  
  
.ZusatzListe {  
 vertical-align:middle;  
 margin:0px;  
 padding:0px;  
}  
  
.Unterschiede {  
 border:0px;  
 vertical-align:middle;  
 margin:0px;  
 padding:0px;  
 font-weight:bold  
}

Die Tabelle ist 1028px groß da ich ja noch links sowie rechts 2px Rand habe.
Also müsste "therotisch" meine Zeilen mit deren Spalten genau reinpassen.

Nun mein Problem. In der Praxis wird die Tabelle scheinbar größer bzw. die Ausgangsspalte (id="msgs") wird gestreckt um ca. 2 oder 3px, so genau kann ich es nicht erkennen. Woher kommt dieser "Fehler"? Liegt es an irgendwelchen CSS-Werten?

Lasse ich aber unter .table3 die Anweisung width=1028px weg, dann entsteht keine sichtbare Verzehrung der Tabelle (table3), der Spalte (msgs) bzw. der gesamten Tabelle.

Ich habe dazu noch eine Art Leerung der Spalte durch Javascript erstellt, welches die Spalte "msgs", wenn man eine andere Auswahl trifft, leert, aber es leert zwar den Inhalt dieser Spalte, aber der Rollbalken bleibt sichtbar, bzw scrollbar, auf der Länge wie die Tabelle vorher lang / hoch war. Aber der Balken müsste doch gesperrt sein, da ja eigentlich kein Inhalt mehr da ist.

LG Romero

[ichbinich]

Hallo,

.table3 {

width:1028px;
border:2px;
border-style:outset;
border-color:lightgrey;
margin-left:25px;
}
}

  
Deine Tabelle ist 1028px breit, dazu kommen noch border-left und border-right von je 2px, macht eine Gesamtbreite von 1032px.  
  
vg ichbinich  

-- 
Kleiner Tipp:  
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...

[romero]

Hallo,

.table3 {

width:1028px;
border:2px;
border-style:outset;
border-color:lightgrey;
margin-left:25px;
}
}

>   
> Deine Tabelle ist 1028px breit, dazu kommen noch border-left und border-right von je 2px, macht eine Gesamtbreite von 1032px.  
>   
> vg ichbinich  
>   
  
Hy auch,  
  
ja das sit mir schon klar, aber die Frage war ja warum die Spalte trotzdem gestreckt wird, wenn diese aber eine Weite von 1108px aufweist. Da passt sie ja ohne Probleme rein, auch wenn ich margin-left:25px hab.  
  
~~~html
			<tr class="Zeile22" id="div-container">  
				<td class="Spalte1"></td>  
				<td colspan=10 bgcolor=#FFFFFF class="Spalte27"><div id="msgs" class="rollbalken"></div></td>  
				<td class="Spalte1"></td>  
			</tr>

Das ist die besagte Spalte, wo es Probleme gibt.

Das selbe Problem tritt auf wenn ich folgende CSS-Anweisungen hab:

td.Spalte27 {  
 width:1108px;  
 margin:0px;  
 padding:0px;  
 }

Diese Spalte ist die Spalte, wo alles aufgelistet wird, also eine Art Übersichtsfenster.

.rollbalken {  
 width:1104px;  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 }

Und das ist die Anweisung für das innere der Spalte (<div></div>).
Gebe ich bei .rollbalken keine Weite an, wird nix in der Breite verzehrt. Gebe ich aber eine Breite von (ausgerechnet) 1108px (Spalte27-Breite) - 2px - 2px (border-left & border-right) = 1104px an, wird es gestreckt in der Weite, es überschreibt sozusagen den Wert der td.Spalte27. Auch wenn ich das padding:5px mit dazurechne, wird es gestreckt.

Die Ausgangstabelle hat eine Weite von 1126px. Dazu habe ich cellspacing von 2px und einen "td-Rahmen" von immer 5px. D.h. also die Spaltenweite ist errechnet durch 1126px - 2x5px (td-Rahmen) - 4x2px (cellspacing zwischen 2 x Aussenrahmen und "td-Rahmen" und "td-Rahmen" und Spalte 27).

Was mache ich also falsch?

LG Romero

[romero]

Ich brauche hier dringend Hilfe von euch.

Ich komm hier irgendwie nicht weiter. Ich habe nun meine Tabelle in der CSS-Anweisung die border-collapse auf collapse gestellt. Und meine td's einen einfachen Rahmen zugewiesen (border:1px solid black).

Die betreffende Zeile:

			<tr class="Zeile22" id="div-container">  
				<td class="Spalte1"></td>  
				<td colspan=10 bgcolor=#FFFFFF class="Spalte27"><p id="msgs" class="rollbalken"></p></td>  
				<td class="Spalte1"></td>  
			</tr>

Das sieht dann wie folgt aus:

Da erkennt man schön den Rahmen von ca. 5px auf der linken Seite, so wie gewünscht.

Und die dazugehörige CSS-Anweisung dazu lautet wie folgt:

.Tabelle1 {  
 width:1126px;  
 display:none; /* --> wird später sichtbar gemacht */  
 margin:0px;  
 padding:0px;  
 border-collapse:collapse  
 }  
  
.rollbalken {  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 }  
  
td.Spalte27 {  
 width:1108px;  
 margin:0px;  
 padding:0px;  
 }

Und wenn ich aber unter:

.rollbalken {  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 }

folgendes eintrage,

.rollbalken {  
 width:1104px; /* --> der besagte Unterschied */  
 margin:0px;  
 padding:5px;  
 border:2px;  
 border-style:inset;  
 }

,sieht es nun wie folg aus:

Egal ob ich da ein <div> oder ein <p> setze, es verschiebt es immer. Aber warum?

LG Romero

[Matthias Apsel]

Om nah hoo pez nyeetz, romero!

Ich brauche hier dringend Hilfe von euch.

Verabschiede dich dringend von zwei Gedanken:

#1# pixelgenaues Design ist notwendig
#2# ein Webdokument sieht in allen Browsern gleich aus

Matthias

[romero]

Om nah hoo pez nyeetz, romero!

Ich brauche hier dringend Hilfe von euch.

Verabschiede dich dringend von zwei Gedanken:

#1# pixelgenaues Design ist notwendig
#2# ein Webdokument sieht in allen Browsern gleich aus

Matthias

Erstmal Danke für die Antwort.

zu 1. auch wenn es vielleicht doof klingt, aber warum ist pixelgenaues Design so absurd? Ich meine, wenn ich aber diverse Sachen anklicke und ich da eine Verschiebung sehe, sieht es für mich nicht professionell aus. Bin da eher ein Perfektionist. Und eine Ursache muss es ja haben oder, warum es zu so einer Verzehrung kommt?

Wenn ich in dieser Spalte ein DIV reinsetze, es aber zu einer Dehnung der Spalte kommt, obwohl ich nur die genaue Breite des DIV's angebe, muss es ja eine Ursache haben oder nicht? Da ist es nun egal ob es 1px oder 10px sind. Irgendwo her müssen dir kommen. Und das wollte ich euch fragen, ob ihr da irgendwo einen Fehler seht.

zu 2. ich brauche nur IE da ich ne HTA-Anwendung habe. Also ist es egal ob es im FF oder sonst wo noch so aussieht.

Wichtig ist für mich, woher diese Verzehrungen kommen. Egal ob ich eine weiter Tabelle in dieses DIV reinsetze oder die Klasse mittels CSS bestimme (width:???). Bevor ich das Ganze noch nicht auf DOCTYPE strict geändert habe bzw. es sauberer geschrieben hab, ist das alles nicht aufgetreten.

Deshalb möchte ich gern wissen. Ist was an meinen Anweisungen falsch? Muss ich noch was hinzufügen an Anweisungen, damit ich es umgehen kann oder es besser wird?

LG Romero

[Matthias Apsel]

Om nah hoo pez nyeetz, romero!

zu 1. auch wenn es vielleicht doof klingt, aber warum ist pixelgenaues Design so absurd?

Weil die Leute unterschiedliche Bildschirauflösungen zum Beispiel aufgrund ihrer visuellen Wahrnehmung haben. Deshalb ist das genaue Gegenteil, ein fluides Layout, anzustreben.

Wenn ich in dieser Spalte ein DIV reinsetze, es aber zu einer Dehnung der Spalte kommt, obwohl ich nur die genaue Breite des DIV's angebe, muss es ja eine Ursache haben oder nicht? Da ist es nun egal ob es 1px oder 10px sind. Irgendwo her müssen dir kommen. Und das wollte ich euch fragen, ob ihr da irgendwo einen Fehler seht.

Ich gebe zu, ich habe deinen Code ignoriert, weil ich dich an mehreren anderen Stellen schon auf die unkluge Herangehensweise hingewiesen habe, aber:

Die Angabe width beeinflusst die Breite des Inhaltes. Es gibt auch alternative Boxmodelle (Working Draft)

Zudem werden Links im Allgemeinen im gerade angeklickten Zustand mit einem Rahmen umgeben. Vielleicht ist das die Verschiebung.

Matthias

[romero]

Weil die Leute unterschiedliche Bildschirauflösungen zum Beispiel aufgrund ihrer visuellen Wahrnehmung haben. Deshalb ist das genaue Gegenteil, ein fluides Layout, anzustreben.

Ok da ist es verständlich aber bei mir, an meinem Rechner stelle ich ja nicht jedesmal die Auflösung um also kann ich ja, erstmal für mich, ein pixelgenaues Design anstreben.

Ich gebe zu, ich habe deinen Code ignoriert, weil ich dich an mehreren anderen Stellen schon auf die unkluge Herangehensweise hingewiesen habe, aber:

Die Angabe width beeinflusst die Breite des Inhaltes. Es gibt auch alternative Boxmodelle (Working Draft)

Zudem werden Links im Allgemeinen im gerade angeklickten Zustand mit einem Rahmen umgeben. Vielleicht ist das die Verschiebung.

Mag ja sein, dass meine Herangehensweise unklug ist, aber wie gesagt, irgendwo muss ja der Fehler herkommen. Weil ohne die genaue Angabe der Weite passiert es nicht. Da wird die Spalte mit einer Breite von 5px genau dargestellt (Augenmaß :)). Breite genau ausgerechnet und hinzugefügt, verschwindet optisch diese Breite. Da sieht es so aus, als werden da nur die cellspacing-Abstände von je 2px dargestellt.

Ich kann aber auch die ganzen Weiten, welche störend sind, weglassen, so das der IE sich das selber zusammenreimt, aber es ist nicht sauber im Sinne von strict.

IE6 und IE8 bisher ohne Verzehrungen, wenn ich bestimmte Weiten weglasse aber wer weiß wie es bei höheren IE's aussieht?

Zu den Boxmodellen in CSS3. Ich schreibe aber nicht in CSS3. Oder etwa doch? Hab dazu ja nix angegeben.

Wenn ich nun (CSS-Anweisungen) in der .Tabelle das border-collapse rausnehme und auch die width:1104px bei .rollbalken dann sind keine Verzehrungen zu erkennen aber auch kein td-Rahmen von 5px.

LG Romero

[romero]

Wenn ich zusätzlich zu der Klasse .rollbalken die Anweisung position: absolute; ... Werte ... setze, damit sozusagen diese Ansicht über dem Rest liegt, dann wird dagegen nix verzehrt dargestellt.

Ich lasse also vermuten, dass es was mit dem DIV und den TD's zutun hat, dass er da Darstellungsprobleme hat.

LG Romero

[romero]

Ich habe nun über die Entwicklerkonsole des IE8 nun meine Darstellung überprüft. Und dabei festgestellt, dass unter IE8 z.B. kein border-style:inset dargestellt wird. Unter IE7 wird es aber. Zudem werden unterschiedliche Weiten angezeigt. Wenn ich also diese besagte Spalte mit 1108px angebe (so wie es der IE8 anzeigt), wird nix verschoben.

Nun will ich aber in dieser Spalte mit der besagten Spaltenbreite von 1108px ein DIV-Element einfügen. Dieses Element hat ein border von 2px, border-style:inset und padding von 5px. Nach Adam Riese ergibt sich also eine angebliche Breite von 1094px. Trage ich das nun so ein, sind die Werte der Spalte bei etwa 1116px.

Wenn ich aber die Höhe als Vergleich dazu nehme dann geht diese Rechnung auf, also Höhe in der Spalte ist 500px. Bei der Angabe des DIV's-Bereiches (border:2px; padding;5px;) gebe ich da eine Höhe von 486px an. Und da erkenne ich in der Entwicklerkonsole keine Fehler. Alle sind auf 500px gesetzt (Bezug auf die Spalte). Da wird also das DIV sichtbar und rechnerisch eingefügt.

Warum also nicht bei der Breite?

Erst wenn ich die DIV-Breite auf etwa 980px setze, sehe ich keine Verschiebungen der Elemente. Aber da habe ich auf der rechten Seite einen "Rand" von ca. 120 (also die restlichen Pixel bis zum rechten Rand der Spalte).

PS: ich habe eure bisherigen Links, Ratschläge und auch andere google-Anzeigen durchforstet und gelesen aber nix passendes gefunden bzw. alle Tests brachten nix.

LG Romero