Posted By

bassdas on 05/15/08


Tagged

div css width ie float browser margin bug floating BugFix XHMTL


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

bassdas


Float in Float IE6 margin wrong inherted div width Bug


 / Published in: CSS
 

URL: http://cms4.blogspot.com/2008/05/float-in-float-ie6-margin-wrong.html

Bugfix/Lösungsvorschlag:

Es ist offensichtlich, dass die Zelle mit der ID cell3467 und dem definierten "margin-right: 3.09%" falsch berechnet wird - nämlich mit realen 16 Pixeln anstatt 8 - und auf den obersten Basis-Wert der "DIV width" zurückgreift (100% anstatt 50%). Dabei wird dazwischen die Weite 50% der Gruppe #group1573 übergangen! Somit müssen wir nach dieser Gruppe nochmals eine Ebene (DIV) mit der Weite von 100% (width: 100%) definieren um die richtige Weite von realen 3.09% (8 Px) zu erlangen.

Es muss nun innerhalb der Gruppe nochmals eine Ebene (DIV) mit einer Weite von 100% erstellt werden:

  1. <body>
  2. <div id="page">
  3. <div id="content" style="background-color: yellow;">
  4. <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
  5. <!-- Bugfix for IE6 related margin width -->
  6. <div style="width: 100%">
  7. <!-- E: Bugfix -->
  8. <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
  9. <p>Box 1</p>
  10. </div>
  11. <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
  12. <div>
  13. <p>Box 2</p>
  14. </div>
  15. </div>
  16. <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
  17. <p>Box 3</p>
  18. </div>
  19. <!-- Bugfix for IE6 related margin width -->
  20. </div>
  21. <!-- E: Bugfix -->
  22. </div>
  23. </div>
  24. </div>
  25. </body>

Report this snippet  

You need to login to post a comment.