# CSS-width-Attribut per JavaScript auslesen



## Thomas D (14. Mai 2007)

Hallo!

Ich bin derzeit beim Entwickeln einer Bildergalerie. Dabei habe ich das Problem, dass ich solange Graphiken in eine Zeile einfügen möchte, solange Platz ist - sprich: kein horizontaler Scrollbalken. Ich habe mir gedacht, die Größe des Fenster durch JavaScript abzufragen und dies mit der Breite der Bilder zu vergleichen. Jetzt habe ich aber das Problem, dass die folgende Anweisung mir nichts zurück liefert:


```
document.getElementById('content').style.width;
```

Auch der Zugriff ohne die CSS-Eigenschaft, die gesetzt ist, funktioniert nicht. Ich wäre an einer dynamischen Lösung interessiert, sodass die Einteilung der Bilder auch dann noch funktioniert, wenn die Breite per CSS verkleinert oder vergrößert wird. Wenn jemand eine Lösung dieses Problems oder Alternativvorschläge hat, nur her damit ;-) ...

MfG, Thomas D.


----------



## Quaese (14. Mai 2007)

Hi,

versuch es mal mit der Eigenschaft *offsetWidth*.

```
document.getElementById('content').offsetWidth
```
Ciao
Quaese


----------



## Thomas D (14. Mai 2007)

Super, es funktioniert ;-)! Hvala lepa!

Es bleibt doch leider eine Frage offen: Im Firefox hat alles so funktioniert, wie es sollte. Im Opera wird der Text in Verbindung mit dem Bild allerdings anders dargestellt. Somit würde ich gerne die Breite eines <td>-Tags auslesen, um beiden Browsern zur Genüge tun. Allerdings funktioniert weder


```
alert (td.width);
```

noch


```
alert (td.offsetWidth);
```

Wie kriege ich das hin


----------



## Quaese (14. Mai 2007)

Hi,

wenn ich die Tabellenzelle über eine ID anspreche, funktioniert es bei mit im IE6, FF1.5 und Opera 9.

```
<table>
	<tr>
	 <td id="td_id">Hallo, wie breit bin ich?</td>
	 <td><button onclick="alert(document.getElementById('td_id').offsetWidth);">Antwort</button></td>
	</tr>
</table>
```
Ciao
Quaese


----------



## Thomas D (14. Mai 2007)

Stimmt, wenn ich das so wie du schreibe, dann geht's auch. Blöderweise erzeuge ich die Tabelle dynamisch zur Laufzeit:


```
var table = document.getElementById ("galerieCont");
var c, tr, td, img;

while (table.firstChild != null) //bisherigen Inhalt löschen
	table.removeChild (table.firstChild);

var ordnername, screenWidth = document.getElementById('content').offsetWidth;
var platz = 0;

tr = document.createElement ("tr");
for (ordnername in Bildinfos)
{
	platz += folderImg.width;
	if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
	{
		table.appendChild (tr);
		tr = document.createElement ("tr");
		platz = 0;		
	}
	
	td = document.createElement ("td");
	img = document.createElement ("img");
	img.setAttribute ("src", folderImg.src);
	//img.setAttribute ("onMouseOver", "alert ('Hallo');");
	
	td.appendChild (img);
	td.appendChild (document.createTextNode (ordnername));
	tr.appendChild (td);
	alert (td.offsetWidth); //liefert leider stets 0
}
table.appendChild (tr);
```

In Firefox geht's, da hier die Breite des img-Tags von belang ist. Bei Opera kommt's aber scheinbar auf beides an. Interessanter Nebenaspekt: Im IE geht das Script gar nicht  - woran könnte denn das liegen und gibt es eine Alternative wie ich die Breite des <td>-Tags auf dann auslesen kann, wenn ich es zur Laufzeit erzeuge?

Thx, Thomas D.


----------



## Quaese (14. Mai 2007)

Hi,

offensichtlich kann die Breite über *offsetWidth* erst ermittelt werden, wenn die Tabelle in den Dokumentenbaum
eingebunden wurde. 

Vielleicht hilft Dir folgender Workaround weiter.

Erstelle zunächst eine Tabelle, in der alle Zellen in einer Zeile eingebunden werden.
Jede Zelle bekommt eine ID, anhand derer sie später wieder identifiziert werden kann
Es wird ein verstecktes DIV erstellt.
Dieses DIV nimmt die Tabelle auf und wird ins Dokument eingebunden.
Jetzt wird die eigentliche Tabelle erstellt, indem die IDs der zuvor erstellten Zellen durchlaufen werden.
Zu jeder Zelle wird die Breite ermittelt und bei erreichtem Maximum eine neue Zeile in der Zieltabelle angelegt.
Zum Schluss wird die Workaround-Tabelle wieder gelöscht und die Zieltabelle ins Dokument geschrieben.
Der Quellcode könnte folgendermassen aussehen:

```
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  <!--
var arrBilder = new Array();
arrBilder[0] = new Image();
arrBilder[0].src = "../bilder/fussball1.jpg";
arrBilder[0].txt = "Text";
arrBilder[1] = new Image();
arrBilder[1].src = "../bilder/fussball2.jpg";
arrBilder[1].txt = "Ich bin der ellenlange Text zum Bild und so weiter und so weiter";
arrBilder[2] = new Image();
arrBilder[2].src = "../bilder/fussball3.jpg";
arrBilder[2].txt = "Noch Text";

var intScrWidth = 200; // Breite, ab der umgebrochen wird

function dieFunktion(){
  var arrIDs = new Array();

  /* Workaround-Tabelle aufbauen und in Dokument einhängen (versteckt) */
  var objTable = document.createElement("table");
  var objTBody = document.createElement("tbody");
  var objTR = document.createElement("tr");

  for(entry in arrBilder){
    var objImg = document.createElement("img");
    objImg.src = arrBilder[entry].src;
    var objTD = document.createElement("td");
    // Hilfs-ID in Zelle schreiben
    objTD.id = "workaround_" + entry;
    // ID in Hilfsarray sichern
    arrIDs[arrIDs.length] = "workaround_" + entry;
    // Bild und Text in Zelle einbinden
    objTD.appendChild(objImg);
    objTD.appendChild(document.createTextNode(arrBilder[entry].txt));
    // Zelle einhängen
    objTR.appendChild(objTD);
  }
  // Zeile und TBody einhängen
  objTBody.appendChild(objTR);
  objTable.appendChild(objTBody);

  // Verstecktes DIV erstellen, Tabelle darin einbetten und das ganze Konstrukt in Dokument einbinden
  var objDiv = document.createElement("div");
  objDiv.style.visibility = "hidden"; // "visible"
  objDiv.appendChild(objTable);
  document.getElementsByTagName("body")[0].appendChild(objDiv);


  /* Eigentliche Tabelle aufbauen - aus Breiten der Workaround-Tabelle */
  var intAdd = 0;
  var table = document.getElementById("galerieCont");

  while(table.firstChild != null)
    table.removeChild(table.firstChild);

  objTBody = document.createElement("tbody");
  objTR = document.createElement("tr");

  // Alle IDs der Workaround-Tabelle durchlaufen
  for(entry in arrIDs){
    // Zellen ID-weise ermitteln und übergeben
    objTD = document.getElementById(arrIDs[entry]);
    // Aktuelle Breite ermitteln
    var intHelp = parseInt(objTD.offsetWidth);
    //  Zelle einbinden
    objTR.appendChild(objTD);
    // Gesamtbreite ermitteln
    intAdd += intHelp;

    // Falls Maximalbreite erreicht wurde
    if(intAdd >= intScrWidth){
      intAdd = 0;
      objTBody.appendChild(objTR);
      objTR = document.createElement("tr");
    }
  }
  objTBody.appendChild(objTR);
  table.appendChild(objTBody);

  // Workaround-Tabelle wieder aus Dokument löschen
  document.getElementsByTagName("body")[0].removeChild(objDiv);
}
 //-->
</script>
</head>
<body>
<button onclick="dieFunktion();">ab ...</button>
<table id="galerieCont">
  <tr><td>Die Zelle</td></tr>
</table>
</body>
</html>
```
Ciao
Quaese


----------



## Thomas D (15. Mai 2007)

*Ich krieg' gleich die Krise*

Danke für deine Hilfe ! Da das Script aber mit der Tabelleneinbindung im IE ohnehin nicht funktioniert - egal, ob ich die Sachen jetzt auslesen kann oder nicht, der IE lässt nicht zu, Tabellen einzubinden. Im Opera und Firefox geht's ...

Daher habe ich mich dazu entschlossen, das Layout mit CSS aufzubauen. Dazu habe ich dann den unten angefügten Code verwendet, der im IE bestens funktioniert ... dafür in Opera und Firevox nicht . Bei diesen beiden Browsern werden die Icons wild am Bildschirm angezeigt und die Struktur nicht eingehalten, wohingegen beim IE alles so angezeigt wird, wie es sein sollte.


```
<html><head>
<style type="text/css">
	#beschriftung {
		float: left;
		text-align: center;
		width: 80px; //Breite des Icons folder.bmp
		border: 2px solid black; //Hilfsanzeige
	}
	img.icon {
		border: 2px solid black;
	}
	#box {
		width: 1cm; //danach folgt der Textumburch
		vertical-align: top;
		margin-right: 0.3cm;
		margin-bottom: 0.5cm;
		text-align: center;
	}
	
	#galerieCont {
		border: 2px solid black;
		width: 600;
	}
</style>

</head><body>

<h1>Galerie</h1>

<div id="galerieCont">
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Eine g'scheide Beschriftung'</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Sackhüfen in Wels</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Vernisage in Pregarten</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
</div>
</body></html>
```

Es ist aus der Haut zu fahren - kaum findet man eine Lösung für den einen Browser geht's im anderen wieder nicht. Gibt es irgendeinen Lösungsvorschlag (vornehmlich per CSS-Formatierung), mit dem ich die Bildergalerie in allen 3 großen Browsern einigermaßen gleich formatieren kann 

MfG, Thomas D.

BTW: Zur Vereinfachung des Problems habe ich jetzt einfach mal den ganzen JavaScript-Teil weggelassen und eine rein dynamische Lösung verwendet.


----------



## Quaese (15. Mai 2007)

Hi,

mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror. 

Ich denke, dass Dein IE-Problem darin lag, dass Du die Tabellenzeile in das Tabellenelement einhängen 
wolltest. Korrekterweise muss es jedoch in ein TBODY-Element eingehängt werden. Dieses wird dann in 
die Tabelle eingebunden.

Ciao
Quaese


----------



## Thomas D (15. Mai 2007)

Quaese hat gesagt.:


> Hi,
> 
> mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror.
> 
> ...



Hm, jetzt habe ich die Tabellenlösung aber schon verworfen. Hättest du vielleicht auch eine Idee, wieso meine CSS-Lösung nicht in Browsern mit der Gecko Engine funktioniert? Ansonsten muss ich halt alles noch einmal auf die Tabellen umschreiben  ...


----------



## Thomas D (16. Mai 2007)

So, bin jetzt wieder zur der von dir angedachten Tabellenlösung zurückgekehrt. Zuerst hat diese nur im Firefox und dem IE funktioniert, da Opera das DOM scheinbar etwas anders interpretiert (s. Code) . Auf jeden Fall habe ich auch dieses Problem durch eine Opera-spezifische Browserweiche aus der Welt geschafft ;-). Jetzt gibt es nur mehr ein kleines Detailproblem (bei allen Browsern das gleiche): In der ersten Zeile der Bildausgabe wird ein Element früher umgebrochen als es sollte. Die restlichen Zeilen passen dann alle:

Code:


```
<html><head></head><body>
<script type="text/javascript">
	var folderImg = new Image ();
	folderImg.src = "res/folder.bmp";
	var Bildinfos = new Array ("abc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc");

	function ordnerAuswahlAufbauen ()
	{
		var table = document.getElementById ("galerieCont");
		var hiddenTable = document.getElementById ("hiddenTable");
		var tr, td, tbody, img, c;
		
		//while (table.firstChild != null) //bisherigen Inhalt löschen
			//table.removeChild (table.firstChild);
		
		var ordnername, screenWidth = 600;
		var platz = 0;
		
		/*
		Als erstes wird die Struktur in einer versteckten Tabelle komplett aufgebaut; dies ist
		leider deshalb notwendig, da die offsetWidth von <td>-Tags erst dann korrekt ausgelesen
		werden kann, wenn die Tabelle vollständig in die HTML-Struktur eingebunden worden ist.
		Danach wird die Originaltabelle berechnet, die korrekt ausgerichtet ist  
		*/
		tbody = document.createElement ("tbody");
		tr = document.createElement ("tr");
		for (ordnername in Bildinfos)
		{
			platz += folderImg.width;
			if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
			{
				tbody.appendChild (tr);
				tr = document.createElement ("tr");
				platz = 0;		
			}
			
			td = document.createElement ("td");
			img = document.createElement ("img");
			img.setAttribute ("src", folderImg.src);
			
			//img.setAttribute ("onMouseOver", "alert ('Hallo');");
			
			td.appendChild (img);
			td.appendChild (document.createTextNode (ordnername));
			tr.appendChild (td);
		}
		tbody.appendChild (tr);
		hiddenTable.appendChild (tbody);
		
		/*
		Nun wird die eigentlich sichtbare Tabelle erstellt; dies ist deshalb nötig, da die
		Zellenbreite erst dann berechnet werden kann, wenn die Tabelle in die DOM-Struktur
		eingebaut worden ist.
		*/ 
		
		var hiddenTr, hiddenTd;
		
		if (navigator.appName == "Opera")
		{	
			hiddenTr = hiddenTable.firstChild.firstChild; //läuft im Opera
			for (c=0; c<2000; c++) //Opera braucht "etwas Zeit", um die offsetWidth korrekt berechnen zu könne :rolleyes:
				;
		}
		else //läuft im Firefox und IE
			hiddenTr = hiddenTable.firstChild.nextSibling.firstChild;
		
		tbody = document.createElement ("tbody");
		tr = document.createElement ("tr");
		platz = 0;
		 
		while (hiddenTr != null)
		{
			hiddenTd = hiddenTr.firstChild;
			while (hiddenTd != null)
			{
				platz += hiddenTd.offsetWidth;
				if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
				{
					tbody.appendChild (tr);
					tr = document.createElement ("tr");
					platz = 0;
				}
				
				td = document.createElement ("td");
				
				//alle Kindknoten des versteckten TDs an das neue anhängen
				td = hiddenTd.cloneNode (true); //alle Informationen werden mitgeklont - Kindeelement und Text
				
				tr.appendChild (td);
				hiddenTd = hiddenTd.nextSibling;
			}
			hiddenTr = hiddenTr.nextSibling;
		}
		tbody.appendChild (tr);
		table.appendChild (tbody);
	}
</script>

<h1>Galerie</h1>

<table id="galerieCont" border>
</table>
<table id="hiddenTable" style="visibility: hidden">
</table>

<script language="JavaScript" type="text/javascript">
	ordnerAuswahlAufbauen ();
</script>
</body></html>
```

Vielleicht kommt ja wer auf den Fehler drauf ...

MfG, Thomas D.


----------



## Thomas D (21. Mai 2007)

Hallo!

Ich habe den Code in meinem vorherigen Posting nun so modifziert, dass jeder ihn ausführen kann. Einzig eine Graphik muss als res/folder.bmp gespeichert werden, um die HTML-Datei anzusehen. Um meinen Fehler noch einmal genauer zu illustrieren, habe ich hier einen Screenshot upgeloadet: http://www.thomasd.info/temp/HTMLFehler.jpg

Wie schon gesagt: In der ersten Zeile (und nur dort) wird der Zeilenumbruch schon eine Zelle zu früh durchgeführt. Ich komme leider nicht drauf warum  ...

MfG, Thomas D.


----------



## Sven Mintel (22. Mai 2007)

Ich befürchte, dein ganzer Ansatz per JS wird so nicht aufgehen können 

Das Problem ist Folgendes: du musst bereits vor dem Aufbau der Tabelle wissen, wie breit die breiteste Zelle sein wird.
Warum:
In Reihe 1 geht alles gut....aber:
sobald du in den nachfolgenden Reihen Zellen einfügst, und eine Zelle in einer Spalte breiter ist als die breiteste Zelle derselben Spalte in einer vorrangegangenen Reihe, werden alle vorrangegangenen Spalten breiter, und deine Tabelle wird breiter als geplant.

Ich würde es daher für sinnvoller halten, wenn du zu deinem CSS-Ansatz zurückkehrst.
Das würde zwar  vorrausetzen, dass du im Vorraus für die "Zellinhalte" feste Grössen bestimmst, aber dies sollte aber per PHP machbar sein, da du damit ja bereits vorher ermitteln kannst, wie gross die Grafiken sind. 
Beim Text müsstest du halt ein wenig probieren, ihn zur Not beschneiden o.ä.

Wenn du es aber unbedingt per JS machen willst, könntest du so vorgehen:
Erstelle pro "Bildinfo" ein DIV mit bspw. 1px Breite , weise im den Inhalt zu und ermittle die Breite.
Anhand der grössten ermittelten Breite kannst du dann ermitteln, wieviel Zellen in jedem Fall in eine Reihe passen und die Tabelle entsprechend aufbauen.


----------



## Thomas D (26. Mai 2007)

Hallo, Sven!

Deine Argumentation klingt logisch. Daran wird es wohl letzten Endes bei der Tabellenlösung scheitern. Blöderweise funkt meine CSS-Lösung, wie ich bereits ein paar Posts oben weiter darauf hingewiesen habe, nicht im Opera und im Firefox, dafür aber im IE. Hast du vielleicht eine Ahnung wie ich das auch für diese beiden Browser zum Laufen bringen?

MfG, Thomas D.


----------



## Quaese (26. Mai 2007)

Hi,

vielleicht hilft Dir folgendes Konstrukt weiter.

```
<html><head>
<style type="text/css">
	.beschriftung {
		text-align: center;
		/*width: 80px; Breite des Icons folder.bmp*/
		border: 2px solid black; /*Hilfsanzeige*/
	}
	img.icon {
		border: 2px solid black;
	}
	.box {
		/*width: 80px; danach folgt der Textumburch*/
		vertical-align: top;
		margin-right: 0.3cm;
		margin-bottom: 0.5cm;
		text-align: center;
    display: block;
    float: left;
    height: 120px;
	}

	#galerieCont {
		border: 2px solid black;
		width: 600px;
	}

  .clearDiv{ font-size: 1px;
  					 line-height: 0em;
             height: 0;
             clear: both;}
</style>
</head><body>
<h1>Galerie</h1>

<div id="galerieCont">
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">Eine g'scheide Beschriftung'</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">abc</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">Sackhüfen in Wels</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">defghij</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">Vernisage in Pregarten</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">abc</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">abc</p>
	</div>
	<div class="box">
		<img src="../bilder/telefon.gif" class="icon" />
		<p class="beschriftung">abc</p>
	</div>
  <div class="clearDiv">&nbsp;</div>
</div>
</body></html>
```
IDs dürfen innerhalb eines Dokumentes nur einmalig vergeben werden, deshalb die Änderung von *beschriftung*
und *box* in Klassen.
Weiterhin werden Kommentare in CSS nicht mit Doppelslashes gekennzeichnet, sondern mit /**/.

Vielleicht kannst Du ja etwas damit anfangen.

Ciao
Quaese


----------



## Thomas D (27. Mai 2007)

Vielen Dank für die Hinweise - der Code ist jetzt wirklich wesentlich kürzer und logischer ;-)!

Allerdings habe ich das Problem, dass ich die Ordnerstruktur dynamisch herstellen möchte und hier der Internet Explorer mit dem Setzen der Class-Eigenschaft so seine Probleme hat:


```
span.setAttribute ("class", "box");
```

Zumindest ist es das, was ich glaube, warum das Design jetzt im Firefox und Opera, dafür aber nicht im IE funktioniert. Gibt es hierfür einen Workaround?

Der komplette Code:


```
function ordnerAuswahlAufbauen ()
{
	var galCont = document.getElementById ("galerieCont");
	var img, c, anchor, paragraph, span;
	
	for (ordnername in Bildinfos)
	{			
		span = document.createElement ("span");
		span.setAttribute ("class", "box");
		
		anchor = document.createElement ("a");
		anchor.setAttribute ("href", "Test.htm");
		
		img = document.createElement ("img");
		img.setAttribute ("src", folderImg.src);
		img.setAttribute ("alt", ordnername);
		
		paragraph = document.createElement ("p");
		paragraph.appendChild (document.createTextNode (ordnername));
		paragraph.setAttribute ("class", "beschriftung");
		
		anchor.appendChild (img);
		anchor.appendChild (paragraph);
		
		span.appendChild (anchor);
		galCont.appendChild (span);
	}
}
```

Wie gesagt, im Opera und Firefox alles bestens, im IE wird aber jeder Ordner in einer eigenen Zeile angezeigt. Thx für eure Hilfe !

MfG, Thomas D.

Weiters bin ich gerade beim Überlegen, wie ich es angehen soll, dass nachdem der Platz in der Höhe ausgereizt ist - im Normalfall nach 3 Zeilen Ordnern, die folgenden Seiten angezeigt werden sollen; sprich: Seite 2-x der Galerie. Hier werde ich wahrscheinlich die betreffenden Elemente einfach unsichtbar machen und je nach Klick anzeigen lassen. Schauen wir mal, wie ich das per JavaScript auslesen kann, ob die Seite schon voll oder nicht. Fürs erste sollte ich mich aber darauf konzentrieren, dass das ganze auch im IE läuft  ...


----------



## Quaese (27. Mai 2007)

Hi,

ersetze 

```
span.setAttribute ("class", "box");
```
durch

```
span.className = "box";
```
So sollte es auch im IE funktionieren.

Ciao
Quaese


----------



## Thomas D (27. Mai 2007)

Langsam regt mich diese Cross-Browser-Entwicklung mächtig auf ! Dem IE passt schon wieder irgendetwas nicht und er rückt ausschließlich in der zweiten Zeile 3 "Spalten" weiter rein - Link: http://www.thomasd.info/temp/FalscheIEDarstellung.bmp

Warum? Keine Ahnung  ...

In den beiden anderen Browsern funktioniert es natürlich einwandfrei ...


----------



## rotzlöffeli (27. Mai 2007)

Naja...selbst mit Sehschwäche dürfte es zu erkennen sein, dass in der 1. Spalte das 3 Kästchen mehr Platz benötigt 

Ermittle nach dem Einfügen jedes Knotens seine Höhe, zum Schluss durchlaufe dann nochmal alle Knoten und weise ihnen die höchste ermittelte Höhe zu:

```
<html> <head> <title>Test</title> 
<script type="text/javascript"> 
<!--
folderImg=new Image();
folderImg.src = "res/folder.gif";
var Bildinfos = new Array ("abc", "dkkd", "aaaaaa", "cccc", "dkkd dkkd dkkd dkkd ", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd");
	
function ordnerAuswahlAufbauen ()
{
  maxHeight=0;
	var galCont = document.getElementById ("galerieCont");

	for (ordnername in Bildinfos)
	{			
		galCont.innerHTML+= '<div><a href="Test.htm">'+
		                    '<img border="0"src="'+folderImg.src+'"><span style="cursor:pointer">'+
		                    Bildinfos[ordnername]+'</span></a></div>';
		maxHeight=Math.max(galCont.lastChild.offsetHeight,maxHeight); 
	}
  for(i=0;i<galCont.childNodes.length;++i)galCont.childNodes[i].style.height=maxHeight+'px';
}
window.onload=ordnerAuswahlAufbauen;
//-->
</script>
<style type="text/css">
<!--
#galerieCont {border: 2px solid black;width: 600px;}
#galerieCont div{width:80px;float:left;border:1px solid #000;background:#f1f1f1;font:normal 10px Sans-Serif}
#galerieCont div span{display:block;width:100%;border-top:1px solid c1c1c1;}
-->
</style>
</head>
<body>
<div id="galerieCont"></div>
</body>
</html>
```


----------



## Thomas D (27. Mai 2007)

rotzlöffeli hat gesagt.:


> Naja...selbst mit Sehschwäche dürfte es zu erkennen sein, dass in der 1. Spalte das 3 Kästchen mehr Platz benötigt



Das habe ich natürlich gesehen. Allerdings war es für mich verwundernswert, dass Opera und Firefox keinerlei Probleme damit haben und nur der IE muckt. Von dem her fände ich eine Sonderlösung für das Redmonter Produkt ziemlich na ja.



rotzlöffeli hat gesagt.:


> Ermittle nach dem Einfügen jedes Knotens seine Höhe, zum Schluss durchlaufe dann nochmal alle Knoten und weise ihnen die höchste ermittelte Höhe zu:



Darauf wird es wohl leider wieder einmal hinauslaufen. Letzten Endes ist klar: Sowohl die Tabellen- als auch die CSS-Lösung sind hier meist ungeeignet, da sie einmal in dem einen laufen, in dem anderen wieder nicht. Ändert man was, ist es wieder genau umgekehrt. Es ist aus der Haut zu fahren ! ...


----------



## rotzlöffeli (28. Mai 2007)

Thomas D hat gesagt.:


> Darauf wird es wohl leider wieder einmal hinauslaufen. Letzten Endes ist klar: Sowohl die Tabellen- als auch die CSS-Lösung sind hier meist ungeeignet, da sie einmal in dem einen laufen, in dem anderen wieder nicht. Ändert man was, ist es wieder genau umgekehrt. Es ist aus der Haut zu fahren ! ...



Warum ist das klar?
Da du die Sache ohnehin per JS machen willst, sehe ich nicht wo das Problem bei meinem Vorschlag ist... und der funktioniert browserunabhängig.


----------



## Thomas D (28. Mai 2007)

Klar funktioniert's. Es ist halt nur sehr ärgerlich, dass man für einen einzigen Browser (der halt zufälligerweise der am meisten verbreiteste ist) wieder einen zusätzlichen Algorithmus mit implementieren muss. Mir ist klar, dass Performance in der Client-Webentwicklung nicht wirklich ausschlaggebend ist und werde dies wohl so machen (müssen) - oder eben halt den Text beschneiden. Letzten Endes ist es das, was ich mich meinem Posting ausdrücken wollte: Ärgerlich ...


----------



## rotzlöffeli (28. Mai 2007)

Das ist nicht ärgerlich, das ist der ganz normale Alltag


----------



## Thomas D (28. Mai 2007)

rotzlöffeli hat gesagt.:


> Das ist nicht ärgerlich, das ist der ganz normale Alltag



Wohl wahr  ...

Jetzt bleibt also nur mehr noch das Problem, wie ich erkennen kann, dass ein Box-Elementen außerhalb des anzeigbaren Bereichs liegt. Ich habe einen Contentbereich mit der Höhe 300. Nun sollen in diesen so viel Objekte eingefügt werden, bis diese in diesem Contentbereich keinen Platz mehr haben.

Damit man sich das ganze ein bisschen besser vorstellen kann, habe ich einen Screenshot von meinem Problem gemacht: http://www.thomasd.info/temp/Galerie.jpg

Es sollten hier also nur die ersten beiden Reihen angezeigt werden. Ab Reihe 3 sind die Objekte ja abgeschnitten und sollten demzufolge nicht mehr angezeigt werden. Krieg' ich das irgendwie hin? Gibt es dafür vielleicht eine JS-Abfrage, auf welcher Position sich diese Objekte (Anchor oder Spans) befinden? Auch für eine Count-Lösung wäre ich zu haben. Nur fehlt mir die Information, wie viele Objekte in eine Zeile passen, da ich das ganze ja per CSS gelöst habe.

Ich weiß, dass ich hier mit meiner Fragerei etwas lästig bin, würde mich aber über jeden Hinweis freuen  ...

MfG, Thomas D.


----------



## rotzlöffeli (28. Mai 2007)

Prüfe bei jedem eingefügten "Objekt", ob die zulässige Höhe von galCont überschritten wird.
Falls ja, beende das Einfügen und entferne das zuletzt eingefügte "Objekt" wieder.


----------



## Thomas D (28. Mai 2007)

Und WIE kann ich überprüfen, dass die Höhe von galCont bereits überschritten worden ist


----------



## rotzlöffeli (28. Mai 2007)

Wenn es *offsetWidth* gibt, wird es wahrscheinlich auch eine Eigenschaft *offsetHeight* geben.


----------

