IE6 CSS Float Dropdown Édition

Je suis aux prises avec un problème de flottement IE6. (Je sais que IE6 est nul mais mon énorme entreprise l'utilise ..) J'ai créé une disposition simple, en-tête, corps, pied de page, avec une zone de contenu et une barre latérale dans le corps. Essentiellement une mise en page de blog commune.IE6 CSS Float Dropdown Édition

Je n'ai eu aucun problème pour atteindre cela dans IE6 mais dans la zone de contenu, j'ai essayé de créer un div de zone en vedette dans le haut, puis en dessous de deux div côte à côte. Il semble très bien dans les navigateurs modernes, mais dans IE6, il met la 2e div ci-dessous le 1er. Comme les divs sont trop gros pour le container alors ça pousse le 2ème. Mais cela ne devrait pas être la question car ils sont à la fois assez petite (largeur, rembourrage, marge) pour s'adapter ..

Et voici mon code:

HTML

<body> 
<div id="page-wrap"> 
<div id="header"> 
</div> 

<div id="content"> 
<div id="feature"> 
</div> 

<div class="clear"></div> 

<div id="#1"> 
</div> 

<div id="#2"> 
</div> 

</div><!--Content End--> 

<div id="sidebar"> 
</div> 


<div class="clear"></div> 

<div id="footer"> 
</div> 

</div><!--Body Content End--> 
</div><!--Page Wrap End--> 

</body>

CSS

#page-wrap { 
    width: 960px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#header { 
    width: 954px; 
    height: 50px; 
    padding: 10px 0; 
    margin: 0 3px 2px 3px; 
    border-bottom: #7E7871 dotted 3px; 
} 
#content { 
    float: left; 
    width: 650px; 
    margin: 0; 
    padding: 15px 5px 0 15px; 
} 
#feature { 
    width: 650px; 
    margin: 0; 
} 
#content #1 { 
    border-right: thin solid #CCC; 
    width: 305px; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
#content #2 { 
    width: 305px; 
    margin: 0; 
    padding: 0; 
    float: right; 
} 
#sidebar { 
    float: right; 
    width: 250px; 
    padding: 0 10px 20px 10px; 
    margin: 0; 
    background: url(../_images/bg_aside.gif) repeat-y; 
}

Source

2012-01-04 Colton45

IE6 a été prononcé mort par MS il ya un jour, ils ont fait cuire un gâteau: http://www.theregister.co.uk/2012/01/03/microsoft_ie6_death/ – Jakub

Puisque vous n'avez pas fourni plus de détails à comment votre HTML/CSS ne fonctionne pas dans votre navigateur, la seule erreur que je peux trouver dans votre code est que vous avez un </div> parasite:

<body> 
    <div id="page-wrap"> 
     <div id="header"> 
     </div> 

     <div id="content"> 
      <div id="feature"> 
      </div> 
     </div> 

     <div class="clear"></div> 

     <div id="programs"> 
     </div> 

     <div id="discounts"> 
     </div> 

     <div class="clear"></div> 

    --> </div><!-- THIS ONE! --> 

     <div id="sidebar"> 
     </div> 

     <div class="clear"></div> 

     <div id="footer"> 
     </div> 

     </div><!-- Body content end --> 
    </div><!-- Page wrap end --> 
</body>

Source

2012-01-04 20:48:23 Bojangles

Désolé à ce sujet, j'ai ajouté à ma question pour être plus précis et supprimé le div supplémentaire. Ce div était juste une faute de frappe dans l'écriture .. Merci JamWaffles. – Colton45

Une des raisons pour lesquelles il est tomber en dessous en raison de contenu étant plus grande que la div. Toutefois, votre css ne correspond pas au code HTML fourni.

Il est difficile de déboguer une partie de ceci sans le contenu réel.

En supposant que # 2 et # 1 sont #discounts et #programs, je suggère d'ajouter un débordement: scroll; pour voir comment ça change.

Source

2012-01-04 22:05:05 ecsos

J'ai corrigé le balisage. Désolé pour ça. J'ai donné le débordement: faites défiler un tir. Il met les divs les uns à côté des autres mais il y a des barres de défilement. – Colton45

IE6 CSS Float Dropdown Édition

Répondre

Questions connexes