advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

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 has 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:

Plain TextExpand 
  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.