IE7 marge issue

J'ai un problème avec IE7 lors de l'utilisation des marges.

J'ai un contaner, et à l'intérieur de ce conteneur j'ai quelques boîtes flottantes.

Ces boîtes ont des marges appliquées, haut, à droite, à gauche, en bas, à l'exception de la première case qui n'a pas de marge sur la gauche, et la dernière case qui n'a pas de marge sur la droite.

semble très bien dans tous les navigateurs sauf IE7, où la marge n'applique pas pour le premier élément de chaque rangée (au moins ce que je pense qui se passe.

Si je retire le droit de marge dans IE7 en utilisant le même dev outils, puis vérifier de nouveau sur elle affiche correctement.

quelqu'un at-il vu quelque chose comme ça avant?

Je suis perplexe.

EDIT Il semble provenir de la position: relative sur les divs du conteneur. Le retour à l'static corrige le problème de marge, mais cela signifie que mes divs sont mal alignés dans ie7. Est-ce que quelqu'un sait pourquoi la position relative serait bousiller les marges ??

NOUVEAU EDIT Exemple téléchargement peut être trouvé ici: www.jimplode.co.uk/content/stackoverflow.zip

vue incorrect

marges correctes, après décochant et revérifier juste l'un des styles de marge. Correct

Le code HTML:

<div class="lowerContent"> 
    <div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h1>Car Insurance</h1> 
               <ul> 
                <li>Protected NCD for life</li> 
                <li>NCD Accelerator</li> 
                <li>European Cover Included</li> 
                <li>Multiple Drivers and Vehicles</li> 
                <li>Breakdown Cover Included</li> 
                <li>Legal Cover Included</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="imageContainer"> 
               <img src="/images/misc/boxphoto_1.jpg" alt="box image 0" /> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h2>Home Insurance</h2> 
               <div class="imageContainer"> 
                <img src="/images/misc/boxphoto_2.jpg" alt="box image 2" /> 
               </div> 
               <ul> 
                <li>Working at home Equipment</li> 
                <li>Helmet and Leathers</li> 
                <li>Legal Cover</li> 
                <li>Caravan Cover</li> 
                <li>Personal Accident Cover</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h2>Life Insurance</h2> 
               <div class="imageContainer"> 
                <img src="/images/misc/boxphoto_3.jpg" alt="box image 3" /> 
               </div> 
               <ul> 
                <li>Cover From &pound;5 a month</li> 
                <li>Your loved ones protected</li> 
                <li>Immediate cover available</li> 
                <li>We search, you save</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 
        <div class="emptyClear"></div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_4.jpg" alt="box image 4" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_5.jpg" alt="box image 5" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_6.jpg" alt="box image 6" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_7.jpg" alt="box image 7" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 
        <div class="emptyClear"></div> 
</div>

Le CSS:

.lowerContent 
    { 
     position:relative; 
     margin:0px 0px 0px 0px; 
    } 

    .expandableBox 
    { 
     display:block; 
     width:100%; 
    } 

    .expandableBox .top 
    { 
     background-image:url("/images/backgrounds/bkg_whitebox_t.png"); 
     background-repeat: repeat-x; 
     height:10px; 
    } 

    .expandableBox .topLeft 
    { 
     height:10px; 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_tl.png"); 
     background-repeat: no-repeat; 
     background-position:left top; 
    } 

    .expandableBox .topRight 
    { 
     height:10px; 
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_tr.png"); 
     background-repeat: no-repeat; 
     background-position:right top; 
    } 

    .expandableBox .middleLeft 
    { 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_l.png"); 
     background-repeat: repeat-y; 
     background-position:left top; 
    } 

    .expandableBox .middle 
    { 
     background-color:#FFFFFF; 
    } 

    .expandableBox .middleRight 
    {  
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_r.png"); 
     background-repeat: repeat-y; 
     background-position:right top; 
    } 

    .expandableBox .bottom 
    { 
     background-image:url("/images/backgrounds/bkg_whitebox_b.png"); 
     background-repeat: repeat-x;  
     background-position:bottom; 
     height:10px; 
     margin-bottom:7px; 
    } 

    .expandableBox .bottomLeft 
    { 
     height:10px; 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_bl.png"); 
     background-repeat: no-repeat; 
     background-position:left bottom; 
    } 

    .expandableBox .bottomRight 
    { 
     height:10px; 
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_br.png"); 
     background-repeat: no-repeat; 
     background-position:right bottom; 
    } 




    .contentBoxMarginLeft 
    { 
     margin-left:10px; 
    } 

    .contentBoxMarginRight 
    { 
     margin-right:10px; 
    } 

    .contentBoxMarginTop 
    { 
     margin-top:10px; 
    } 

    .contentBoxMarginBottom 
    { 
     margin-bottom:10px; 
    } 
.fullContentBox 
{ 
    width:940px; 
    float:left; 
} 

.largeContentBox 
{ 
    width:700px; 
    float:left; 
} 

.mediumContentBox 
{ 
    width:460px; 
    float:left; 
} 

.smallContentBox 
{ 
    width:220px; 
    float:left; 
} 


.mediumContentBox .textContainer 
{ 
    float:left; 
    width:210px; 
} 

.mediumContentBox .imageContainer 
{ 
    float:right; 
    width:210px; 
} 


.smallContentBox .textContainer 
{ 
} 

.smallContentBox .textContainer .imageContainer 
{ 
    float:right; 
    padding:5px 0px 0px 0px; 
} 

.smallContentBox .imageContainerAlternate 
{ 
    float:left; 
    padding:0px 0px 0px 0px; 
} 

a.smallButtonLeft, 
a.smallButtonRight 
{ 
    display:inline-block; 
    background-image:url('/images/backgrounds/bkg_sprites_buttons.png'); 
    height:30px; 
    background-position:left top; 
    background-repeat:no-repeat; 
    padding:0px 10px; 
    line-height:23px; 
    color: #0F4DBC; 
    font-family: Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    text-decoration: none; 
    text-transform: capitalize; 
} 
a.smallButtonLeft:hover 
{ 
    background-position:left -44px; 
} 

a.smallButtonRight 
{ 
    background-position:right -217px; 
    color: #4D4F52; 
} 
a.smallButtonRight:hover 
{ 
    background-position:right -262px; 
} 


.boxButtons 
{ 
    float:left; 
    padding:10px 0px 0px 0px; 
} 

.smallContentBox .boxButtons 
{ 
    width:200px; 
    text-align:center; 
}

Merci à l'avance.

Source

2010-12-13 jimplode

hors-sujet et sans rapport avec votre question, mais si vous voulez des coins arrondis dans IE de manière CSS convivial, sans avoir à déranger avec des graphismes de coin, je vous recommande de vérifier [CSS3Pie] (http: // css3pie. com). – Spudley

ouais, css3 n'est pas une option, doit également supporter IE6 !! :(ainsi que CSS3 est pas encore totalement pris en charge et quelques bits sont encore en projet. Je préférerais attendre le respect des normes, plutôt que d'avoir à utiliser des styles propreitary pour mozilla ou WebKit – jimplode

coins arrondis utiliser le formulaire standard dans Safari et Chrome. – Rob

Peut-être quelque chose à voir avec des marges effondrement. Je tenterais de n'avoir que la marge à gauche, puis la marge à gauche: 0 sur le premier.

Sinon, essayez notre vieil ami « zoom: 1 » sur les divs flottaient ou le conteneur parent. Résout souvent beaucoup de l'étrangeté IE plus obscure.

Source

2010-12-13 15:38:47

Cela a fonctionné !!! Pouvez-vous expliquer le style de zoom ?? – jimplode

"zoom: 1" déclenche ce qu'on appelle "hasLayout". hasLayout est une propriété booléenne que les éléments DOM ont dans Interet Explorer. Vous ne pouvez pas le définir directement, mais définir un certain nombre d'autres propriétés provoque le déclenchement et "zoom: 1" est ma méthode préférée. Explication beaucoup plus éloquente ici: http://www.satzansatz.de/cssd/onhavinglayout.html –

Répondre

Questions connexes