Liste der Anhänge anzeigen (Anzahl: 2)
Div mit 100% width nimmt im IE6 keine 100%
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-Code:
<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...
AW: Div mit 100% width nimmt im IE6 keine 100%
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ß
AW: Div mit 100% width nimmt im IE6 keine 100%
Zitat:
Zitat von
lordevil
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/469...tml#post296242 :D
AW: Div mit 100% width nimmt im IE6 keine 100%
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ß
AW: Div mit 100% width nimmt im IE6 keine 100%
Hast Du mal einen konkreten Quelltext oder Testlink?
Mir das jetzt selbst zusammen zu bauen und zu testen ist mir tatsächlich zuviel Action...
AW: Div mit 100% width nimmt im IE6 keine 100%
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-Code:
<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ß
AW: Div mit 100% width nimmt im IE6 keine 100%
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.
AW: Div mit 100% width nimmt im IE6 keine 100%
BTW: Wenn es sich um tabellarische Daten handelt, sollte auch eine Tabelle genutzt werden.
Eventuell löst das das Problem auch schon...
AW: Div mit 100% width nimmt im IE6 keine 100%
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ß
AW: Div mit 100% width nimmt im IE6 keine 100%
Zitat:
Zitat von
lordevil
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.
AW: Div mit 100% width nimmt im IE6 keine 100%
Das mit dem Quirksmode ist ne wichtige Info, da der 6er mit nem richtigen Doctype tatsächlich oft auf Linie gebracht werden kann. Tabellen einzusetzen mit CSS Formatierung (http://www.thestyleworks.de/tut-art/layout_table.shtml) könnte tatsächlich helfen.
AW: Div mit 100% width nimmt im IE6 keine 100%
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-Code:
<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-Code:
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-Code:
<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-Code:
<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-Code:
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ß
AW: Div mit 100% width nimmt im IE6 keine 100%
Zitat:
Zitat von
lordevil
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.
Ja - wahrscheinlich mit einer DocType.
AW: Div mit 100% width nimmt im IE6 keine 100%
AW: Div mit 100% width nimmt im IE6 keine 100%
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ß
