• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div mit 100% width nimmt im IE6 keine 100%

lordevil

New member
Hallo zusammen,

ich habe ein Problem, das mich zum verzweifeln bringt. Ich habe mehrere ineinander geschachtelte Divs, die alle unterschiedliche Hintergrundfarben haben, um eine Art Hierarchie abzubilden. Dummerweise werden die geschachtelten Divs im IE nicht 100% breit, wodurch das komplette Design zerschossen wird. Im Firefox hingegen funktioniert es richtig.

Beispiel:
PHP:
<div id="1" width="200px">
  <div id="1_1"></div>
    <div id ="1_2"</div>
  <div id="2_1"></div>
    <div id="2_2"></div>
</div>

Das äußere Div hat also 200px, alle inneren Divs haben 100% width. Solange die inneren Divs nicht mehr als 200 Pixel brauchen funktioniert alles wunderbar. Nehmen wir jetzt aber mal an, dass div 1_1 100 Pixel bräuchte, 1_2 benötigt 150 Pixel, 2_1 benötigt ebenfalls 150 Pixel. 2_2 benötigt jedoch 250 Pixel um den Inhalt dazustellen. Somit streckt sich das äußerste Div auf 250 Pixel, die beiden Div 1_1 und 1_2 bleiben jedoch bei 200 Pixel. Somit streckt sich die Hintergrundfarbe von div 1 rechts an den Divs 1_1 und 1_2 vorbei, was nicht so toll aussieht.

Hat jemand eine Idee, woran das liegen könnte?

Ich habe mal zwei Screenshots angehangen, auf denen man die unterschiedlichen Darstellungen sehen kann. Außerdem habe ich den Div-Containern unterschiedliche Rahmenfarben verpasst, damit man genau sieht, wie weit sie sich strecken.

Vielen Dank im Voraus...
 

Anhänge

  • ff.GIF
    ff.GIF
    63,8 KB · Aufrufe: 11
  • ie.gif
    ie.gif
    65 KB · Aufrufe: 11
Hallo zusammen,

hat irgendjemand eine Idee? Das Ganze ist natürlich echt blöd nachzuvollziehen, aber es wär echt super, wenn mir jemand sagen könnte, wie ich den IE überredet kriege, das Ganze "richtig" anzuzeigen...

Gruß
 
Das Ganze ist natürlich echt blöd nachzuvollziehen, aber es wär echt super, wenn mir jemand sagen könnte, wie ich den IE überredet kriege, das Ganze "richtig" anzuzeigen...

Ist nicht superblöd, sondern recht interessant. Allerdings hatte ich nur kurz Zeit, mir die Sache anzusehen und es ist mir noch nichts eingefallen. :( Will mir aber heute Abend nochmal Zeit nehmen, obwohl ich denke, dass der 6er derartige Investitionen nicht mehr wert ist und man da andere Maßnahmen ergreifen kann:
http://forum.jswelt.de/smalltalk/46968-ie6-ie7-sicher-absturz-bringen.html#post296242 :D
 
Hi Anna,

danke für die Antwort. Wäre natürlich eine echte Alternative, den IE einfach abschmieren zu lassen, allerdings werden die Anwender davon nicht unbedingt begeistert sein... ;) Dummerweise nutzt ein Großteil der Anwender noch den IE6...

Habe mir spaßeshalber auch mal den Safari installiert. Der stellt es auch richtig dar, von daher scheint es wohl wirklich ein IE-Bug zu sein.

Falls du eine Idee hast, wäre ich über jede Hilfe dankbar.

Gruß
 
Hast Du mal einen konkreten Quelltext oder Testlink?
Mir das jetzt selbst zusammen zu bauen und zu testen ist mir tatsächlich zuviel Action...
 
Hi dkdenz,

das Ganze kommt aus nem SAP-System mit orginal Firmenstruktur etc. Deshalb habe ich bei den Screenshots schon alle Texte rausgeschnitten. Ich bin allerdings erst am Dienstag wieder in der Firma. Dann könnte ich mal gucken, ob ich schnell ein entsprechendes Beispiel zusammengebastelt kriege.

Quellcode könnte ich schon mal in gekürzter Form anbieten:


PHP:
<html>
  <head>
    <title>OM-Tree</title>
    
    <link rel="stylesheet" type="text/css" href="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/styles.css" media="all" /><script type="text/javascript" src="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/xmlHttpRequest.js"></script><script type="text/javascript" src="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/adjacent.js"></script><script type="text/javascript" src="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/treeGeneral.js"></script>
    <style type="text/css">
      .text{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;}
      body{padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;color:#000;background-color:#EBEFF2;}
    </style>
  </head>
  <body>
    
    <table cellpadding=0 cellspacing=0 style="width:100%;height:100%;" border=0>
      <tr>
        <td style="width:200px;height:100%;vertical-align:top;">
          
          <div id="mT">
          	<div id="mTHead" class="myUrTHead">
          		<img class="myUrTHeadLink" src="/sap/public/bc/icons/s_b_aexp.gif" onclick="fuExpAll()">
          		<img class="myUrTHeadLink" src="/sap/public/bc/icons/s_b_acom.gif" onclick="fuColAll()">
          		<img class="myUrTHeadLink" src="/sap/public/bc/WebIcons/ur/default/l/Icon/AdvancedSearch.gif" onclick="fuShowSearchEmployee()">
          		<div id="searchEmployee" class="myUrTSearchEmployee"></div>
          		<input style="vertical-align:middle" type="checkbox" name="allEmp" id="allEmp" value="X">
          		<span class="myUrTHeadLink" onclick="fuToggleCb('allEmp')">Alle MA</span>
	          	<input style="vertical-align:middle" type="checkbox" onclick="fuOnlyChief()" name="onlyChief" id="onlyChief" value="X">
	          	<span class="myUrTHeadLink" onclick="fuToggleCb('onlyChief');fuOnlyChief()">Nur VG</span>
	          	<br />
	          	<a id="linkGroups" class="myUrTHeadLink" href="javascript:void(0)" onclick="fuGetGroups(); return false;">Gruppen<img class="myUrTheadLink" style="vertical-align:bottom;text-align:right" src="/sap/public/bc/ur/Design2002/themes/sap_tradeshow/common/menubar/ico12_pu_indicator.gif"></a>
	          	<br />
	          </div>
	          <div id="mTBody" class="myUrTBody">
          	  	<div id="mTBodyHead" class="myUrTBodyHead">Organisationsstruktur</div>
          		<div id="mTBodyBody" class="myUrTBody">
          			<div id="50019139" class="myUrTNode myUrTD0  myUrTBorderTop">
          				<span style="padding-left:0px;width:100%;"><img src="1x1" class="myUrTbOp" onclick="fuClNd('50019139')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50019139'); return false">aaaaa bbbbb cccc dd</a></span>
      					<div id="50030099" class="myUrTNode myUrTD1  myUrTBorderTop">
       						<span style="padding-left:10px;width:100%;"><img src="1x1" class="myUrTbCl" onclick="fuOpNd('50030099')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50030099'); return false">aaaaa bbbbb cccc ddddd</a></span>
	        	  		</div>
	        	  		<div id="50019140" class="myUrTNode myUrTD1 ">
	        	  			<span style="padding-left:10px;width:100%;"><img src="1x1" class="myUrTbCl" onclick="fuOpNd('50019140')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50019140'); return false">aaaaa bbbbb cccc ddddd eee</a></span>
	        	  		</div>
	        	  		<div id="50020146" class="myUrTNode myUrTD1 ">
	        	  			<span style="padding-left:10px;width:100%;"><img src="1x1" class="myUrTbCl" onclick="fuOpNd('50020146')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50020146'); return false">aaaaa bbbbb cccc ddddd eeee fffff gggg</a></span>
	        	  		</div>
	        	  		<div id="50065032" class="myUrTNode myUrTD1 ">
	        	  			<span style="padding-left:10px;width:100%;"><img src="1x1" class="myUrTbCl" onclick="fuOpNd('50065032')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50065032'); return false">aaaaa bbbbb cccc ddddd eeee fff</a></span>
	        	  		</div>
	        	  		<div id="50029673" class="myUrTNode myUrTD1 ">
	        	  			<span style="padding-left:10px;width:100%;"><img src="1x1" class="myUrTbCl" onclick="fuOpNd('50029673')"><a class="myUrTLink" href="javascript:void(0);" onclick="fuNdClick('50029673'); return false">aaaaa bbbbb cccc ddddd eeee fffff ggggg</a></span>
	        	  		</div>
	        	  		<!-- IE-Bug: IE lässt trotz line-height:0px zuviel Platz zwischen den Elementen - deshalb die Krücke mit dem Image -->
	        	  		<img width="100%" height="1px" src="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/border.gif">
	        	  	</div>
	        	  	<!-- IE-Bug: IE lässt trotz line-height:0px zuviel Platz zwischen den Elementen - deshalb die Krücke mit dem Image -->
	        	  	<img width="100%" height="1px" src="/sap/bc/bsp/sap/public/zcl_bsp_om_tree/border.gif">
	        	</div>
		  </div>
          </div>
   </body>
</html>

Und die Stylesheets dazu:

Code:
.myUrTbOp{background:url(/sap/public/bc/ur/Design2002/themes/sap_tradeshow/common/treeview/ico12_treebranch_open.gif) no-repeat;width:15px;height:12px;cursor:pointer;}
.myUrTbCl{background:url(/sap/public/bc/ur/Design2002/themes/sap_tradeshow/common/treeview/ico12_treebranch_closed.gif) no-repeat;width:15px;height:12px;cursor:pointer;}
.myUrTLeaf{background:url(/sap/public/bc/ur/Design2002/themes/sap_tradeshow/common/treeview/ico12_treeleaf.gif) no-repeat;width:15px;height:12px;}
.myUrTBodyHead{background-color:#83ACD8;font-size:10pt;width:100%;font-weight:bold;border-color:#9EB3C6;border-style:solid;border-width:0px;padding:1px 0px;}
.myUrTBody{width:100%;margin:0px;}
.myUrTHead{background-color:#83ACD8;border-color:#FFF;border-style:solid;border-width:0px 0px 1px 0px;padding-bottom:5px;width:100%;}
.myUrTHeadLink{border-width:0px;cursor:pointer;font-size:8pt;font-family:Arial,Helvetica,sans-serif;vertical-align:middle;text-decoration:none;color:#000;}


/* Wichtige Stylesheets für Tree-Ebenen */
.myUrTD0{background-color:#AFC8DE;color:#000;padding:2px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:8pt;text-decoration:none;width:100%;border-style:solid;border-width:1px;border-color:red;white-space:nowrap;}
.myUrTD1{background-color:#C0D4E5;color:#000;padding:2px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:8pt;text-decoration:none;width:100%;border-style:solid;border-width:1px;border-color:green;white-space:nowrap;}
.myUrTD2{background-color:#DDEAF5;color:#000;padding:2px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:8pt;text-decoration:none;width:100%;border-style:solid;border-width:1px;border-color:yellow;white-space:nowrap;}
.myUrTD3{background-color:#F5F9FC;color:#000;padding:2px 0 0 0;font-family:Arial,Helvetica,sans-serif;font-size:8pt;text-decoration:none;width:100%;border-style:solid;border-width:1px;border-color:blue;white-space:nowrap;}
/* Wichtig Ende */


/*
.myUrTBorderTop{border-color:#9EB3C6;border-style:solid;border-width:1px 0px 0px 0px;width:100%;}
Element kann nicht verwendet werden, da der IE immer Platz im DIV reserviert, obwohl nur ne Border gesetzt werden soll.
Das sieht scheisse aus, deshalb muss bei Änderung der Border-Color das Image /sap/bc/bsp/sap/public/zcl_bsp_om_tree/border.gif angepasst werden
.myUrTBorderDown{border-color:#9EB3C6;border-style:solid;border-width:0px 0px 1px 0px;height:0px;line-height:0px;padding:0px;margin:0px;width:100%;}
*/
.myUrTBorderTopDown{border-color:#9EB3C6;border-style:solid;border-width:1px 0px;width:100%;margin:0px;}
.myUrTGroups{z-index:10;width:220px;display:none;border-style:solid;border-color:#000;border-width:1px;position:absolute;padding:5px;left:10px;font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;background-color:#EBEFF2;margin:0}
.myUrTSearchEmployee{z-index:10;width:300px;display:none;border-style:solid;border-color:#000;border-width:1px;position:absolute;padding:5px;left:10px;top:10px;font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;background-color:#EBEFF2;margin:0}
.myUrTAdminGroups{z-index:10;width:450px;display:none;border-style:solid;border-color:#000;border-width:1px;position:absolute;padding:5px;left:10px;top:10px;font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;background-color:#EBEFF2;margin:0}
.myUrTCreateUsergroup{z-index:10;width:200px;display:none;border-style:solid;border-color:#000;border-width:1px;position:absolute;padding:5px;left:20px;top:20px;font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;background-color:#EBEFF2;margin:0}
.myUrTHeadMenuItem{width:100%;}
.myUrTHeadMenuItemSel{background-color:#FFC54E;width:100%;cursor:pointer;}
.myUrTLink{text-decoration:none;color:#000;font-family:Arial,Helvetica,sans-serif;font-size:8pt;}
.myUrTInput{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;height:14pt;}
.myUrTSelect{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;}
.myUrTText{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:8pt;text-decoration:none;}
#myUrTProtectPage{z-index:8;display:none;position:absolute;top:0px;left:0px;bottom:0px;right:0px;width:100%;height:100%;background-color:#F1F1F1;filter:Alpha(opacity=50);-moz-opacity:0.50;opacity: 0.50;}
#myUrTLoading{z-index:80;display:none;position:absolute;top:0px;left:0px;bottom:0px;right:0px;width:100%;height:100%;}
#myUrTLoadingI1{z-index:90;position:relative;top:0px;left:0px;bottom:0px;right:0px;width:100%;height:100%;background-color:#FFF;filter:Alpha(opacity=1);-moz-opacity:0.01;opacity: 0.01;}
#myUrTLoadingI2{z-index:95;top:43%;left:43%;bottom:43%;right:43%;position:absolute;width:14%;height:14%;border-style:solid;border-color:#000;border-width:1px;background:url(/sap/public/bc/ur/nw5/themes/sap_tradeshow/common/loading/loading_ani.gif) no-repeat;background-position:50% 50%;background-color:#FFF}
img {border-width:0px}
html,body {width:100%;height: 100%;}

Gruß
 
Mit ist jetzt zuerst mal aufgefallen, dass du im Quirksmodus arbeitest - ob das Einfluss auf den IE6 hat, weiß ich jetzt leider nicht... aber probieren geht über studieren.
 
BTW: Wenn es sich um tabellarische Daten handelt, sollte auch eine Tabelle genutzt werden.
Eventuell löst das das Problem auch schon...
 
Hi,

um den bescheuerten Quirksmode komme ich leider nicht herum, weil die SAP gewissen Libraries ausrollt, die nur im Quirksmode richtig funktionieren.

Divs sind es eigentlich nur geworden, weil ich die "einfacher" mit JavaScript umschießen konnte.
Beispiel:
Ich habe ein "aufgeklapptes" Div, somit hängen darin weitere Divs. Wenn das "aufgeklappte" Div jetzt wieder zugeklappt wird, kann ich einfach alle inneren Divs entfernen. Ob das mit Tabellen genauso einfach geht, habe ich mir ehrlich gesagt noch nicht angeguckt.

Gruß
 
um den bescheuerten Quirksmode komme ich leider nicht herum, weil die SAP gewissen Libraries ausrollt, die nur im Quirksmode richtig funktionieren.
Von SAP hätte ich irgendiwe mehr erwartet.

Du kannst ja in deine einzelnen Tabellenzellen wieder Divs packen, die du dann entfernen kannst.
 
Hi,

die Stylesheets von der SAP "funktionieren" zwar im strict mode, allerdings sehen sie dann im IE total bescheuert aus. Deshalb der Quirksmode. Und da die Styledefinition ca. 50 Word-Seiten sind, wollte ich die auch nicht neu schreiben... ;)

Wie meinst du das denn mit den Tabellenellen? Momentan hab ich folgendes:

PHP:
<div id="1">
  <div id="1_1">
    <div id="1_1_1"></div>
    <div id="1_1_2"></div>
  </div>
  <div id="1_2">
    <div id="1_2_1"></div>
    <div id="1_2_2"></div>
  </div>
</div>

Wenn nun Div 1 zugeklappt wird, kann ich mit
PHP:
document.getElementById('1').getElementsByTagName('div')
auf die inneren Divs zugreifen und diese rausschmeißen. Und es hat eben noch den Vorteil, dass ich beim Löschen des ersten gefundenen Elements (id="1_1") die Kinder von 1_1 (also 1_1_1 und 1_1_2) automatisch mit raus schmeiße. Somit muss ich quasi immer nur die direkt untergeordneten Divs rausschmeißen und deren innere Divs interessieren mich gar nicht, weil die automatisch mit rausfliegen. Hört sich vielleicht erstmal banal an, allerdings wird das Ganze bis zu einer undefinierten Tiefe geschachtelt (mehrere 100, wenn nicht 1000 Zeilen) und die Methode funktioniert echt sehr performant.

Wenn ich das nun in Tabellenzellen packe, habe ich doch keine ineinandergeschachtelten Divs mehr, oder? Das heißt dann, dass ich erstmal gar keine logische Beziehung zwischen den einzelnen Einträgen habe.
Beispiel
PHP:
<table>
  <tr id="1">
    <td></td>
  </tr>
  <tr id="1_1">
    <td></td>
  </tr>
  <tr id="1_1_1">
    <td></td>
  </tr>
  <tr id="1_1_2">
    <td></td>
  </tr>
  <tr id="1_2">
    <td></td>
  </tr>
  <tr id="1_2_1">
    <td></td>
  </tr>
  <tr id="1_2_2">
    <td></td>
  </tr>
</table>
Wenn nun ein Klick auf id=1 kommt, müsste ich alle rausschmeißen, die eine id haben, die mit 1 beginnt...!? Oder meinst du es so, dass Tabellen ineinander geschachtelt werden? Also etwa so:

PHP:
<table>
  <tr>
    <td id="1">
      <table>
        <tr>
          <td id="1_1">
            <table>
              <tr>
                <td id="1_1_1"></td>
              </tr>
              <tr>
                <td id="1_1_2"></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td id="1_2">
            <table>
              <tr>
                <td id="1_2_1"></td>
              </tr>
              <tr>
                <td id="1_2_2"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Rein logisch gesehen gehören die untergeordneten Einträge halt wirklich in den äußeren (zumindest logisch gesehen).

Ich kann mir irgendwie noch nicht vorstellen, wie das jetzt mit ner Tabelle aussehen würde. Die zweite Variante würde wahrscheinlich funktionieren, weil ich ebenfalls mit
PHP:
document.getElementById('1').getElementsByTagName('table')
auf alle inneren Tabellen zugreifen könnte. Dennoch wäre mir die Div-Lösung lieber, vor allem, weil es weniger Coding ist und irgendwo leuchtet mir bisher auch nicht ein, warum man hier eher eine Tabelle nehmen sollte...!?

Uuuund: Ich denke halt immernoch, dass man auch den IE irgendwie davon überzeugen können muss, dass er die Divs mit ner width von 100% rendert.

Gruß
 
Hallo,

wie gesagt, den Quirksmode abzuschalten ist keine Alternative...

@dkdenz
Meinst du, dass es damit zu tun haben könnte, dass die IDs der Divs nicht mit einem Buchstaben beginnen?

Gruß
 
Also, ich hab jetzt mal versucht, dein Konstrukt ein wenig nachzustellen. Das eigentliche Problem scheint mir daher zu kommen, dass es sich nicht einfach nur um Divs handelt. Dein <div id="mT"> steckt ja in einer Tabellenzelle. Hier interpretiert der IE6 anders als die anderen Standardbrowser. Wenn du sowieso lieber mit Divs arbeitest, kann dann das unflexible Tabellengerüst nicht wegbleiben?
 
Hi Anna,

mir ist prinzipiell egal, ob das mit einer Tabelle oder mit einem Div gelöst wird. Ich werde mal probieren, ob sich das Problem damit erledigt.

Danke vorab & Gruß
 
Hallo Anna,

ich habe mal versucht, die Tabelle durch ein Div zu ersetzen. Leider brachte das keinen Erfolg. Im IE sieht das Ganze nach wie vor wie auf meinem Screenshot aus...

Bei Bedarf kann ich auch nochmal das generierte Coding posten.

Hast du vielleicht noch eine andere Idee?

Mal kurz zur Erläuterung: Es wäre toll, wenn die Anzeige des "Trees" unabhängig vom Coding drum herum funktionieren würde. Da wir diverse Anwendungen haben, bei denen genau diese Firmenstruktur abgebildet werden muss, mussten wir den Tree in der Vergangenheit mehrmals programmieren bzw. kopieren. Änderungen ziehen sich dementsprechend durch mehrere Anwendungen, die eigentlich erstmal das Gleiche machen. Unterschiedlich ist lediglich der rechte Teil der Anwendungen, da hier unterschiedliche Daten visualisiert werden. Meine Idee war es nun den Tree auszulagern. Deshalb habe ich eine Klasse geschrieben, die das entsprechende Coding erzeugt. Ein Objekt dieser Klasse muss lediglich in die Anwendung eingebettet werden und raised entsprechende Events bei Klicks im Tree, damit sich die konsumierende Anwendung darauf registrieren und entsprechend aktualisieren kann. Aus diesem Grund habe ich prinzipiell keinen Einfluss auf das Coding um den Tree. Notfalls könnte man das natürlich organisatorisch lösen, in der Vergangenheit hat das jedoch nicht sonderbar gut geklappt... ;)

Gruß
 
Hallo zusammen,

hat noch jemand eine Idee? Ich habe noch ein bisschen rumprobiert, finde aber einfach keine Lösung, von der sich der IE überzeugen lässt...

Kann man den IE im Quirksmode denn nicht irgendwie "zwingen", die Divs auf 100% zu strecken?

Gruß
 
Zurück
Oben