Advanced Search

Return to Snippet

Revision: 6306
at May 15, 2008 13:55 by bassdas
Initial Code 
<body>
  <div id="page">
    <div id="content" style="background-color: yellow;">
      <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
        <!-- Bugfix for IE6 related margin width -->
     <div style="width: 100%">
        <!-- E: Bugfix -->
       <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
            <p>Box 1</p>
          </div>
          <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
            <div>
              <p>Box 2</p>
            </div>
          </div>
          <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
            <p>Box 3</p>
          </div>
        <!-- Bugfix for IE6 related margin width -->  
        </div>
        <!-- E: Bugfix -->
   </div>
    </div>
  </div>
</body>
Initial URL 
http://cms4.blogspot.com/2008/05/float-in-float-ie6-margin-wrong.html
Initial Description 
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:
Initial Title 
Float in Float IE6 margin wrong inherted div width Bug
Initial Tags 
css, ie, browser
Initial Language 
CSS