Ergebnis 1 bis 15 von 20
-
04-08-2009, 17:18 #1
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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>
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...
-
06-08-2009, 23:18 #2
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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ß
-
07-08-2009, 08:46 #3
AW: Div mit 100% width nimmt im IE6 keine 100%
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 (IE6 und IE7 sicher zum Absturz bringen)
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
07-08-2009, 11:19 #4
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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ß
-
07-08-2009, 11:36 #5
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...
-
07-08-2009, 12:30 #6
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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>
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%;}
-
07-08-2009, 13:19 #7
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.
-
07-08-2009, 13:24 #8
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...
-
07-08-2009, 13:29 #9
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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ß
-
07-08-2009, 13:40 #10
-
07-08-2009, 13:44 #11
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.
.:Taunusstein - Nachrichten und Kommentare
"Ich bin doch lieber jeden Tag glücklich als im Recht."
(Per Anhalter durch die Galaxis)
-
07-08-2009, 14:15 #12
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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>
PHP-Code:document.getElementById('1').getElementsByTagName('div')
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>
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>
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')
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ß
-
07-08-2009, 14:55 #13
-
07-08-2009, 15:01 #14
AW: Div mit 100% width nimmt im IE6 keine 100%
-
07-08-2009, 20:40 #15
Doppel-As
- registriert
- 19-04-2006
- Ort
- Rennerod
- Beiträge
- 137
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ß
Ähnliche Themen
-
CSS-Menü mit float im IE6
Von the-sandman im Forum CSS und (X)HTMLAntworten: 10Letzter Beitrag: 14-11-2008, 16:34 -
my site
Von hidingmyfame im Forum Site-CheckAntworten: 29Letzter Beitrag: 11-08-2008, 09:06 -
div width ermitteln
Von Concept-X im Forum JavaScriptAntworten: 2Letzter Beitrag: 04-06-2008, 18:40 -
script das div id ändert ?
Von darkstar im Forum JavaScriptAntworten: 2Letzter Beitrag: 22-08-2006, 12:02 -
Zerschossenes Design
Von Clausgrm im Forum AllgemeinesAntworten: 19Letzter Beitrag: 26-04-2003, 14:36
Lesezeichen