2 colonnes problème IE 7

**charliejo** · 08/12/2009, 19h17

Bonjour,
J'ai juste 2 colonnes dans un div... et tout fonctionne bien sous Firefox, Chrome, safari, Ie6 et IE8 mais pas sous IE 7.
Ma page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> 
    <head> 
    <link rel="stylesheet" type="text/css" media="all" href="test.css" /> 
    <title>TEST</title> 
</head> 
<body dir="ltr"> 
<div id="articles_recents" class="portfolio"> 
    <h2>Actualit&eacute;s</h2> 
 
    <div class="col2">         
        <div class="extrait"> 
            <h3><a class="titre" href="spip.php?article22" title="lire la suite de l'article">Prix de thèse 2008 catégorie «&nbsp;Recherche appliquée&nbsp;» remis à François VAURETTE</a><em>&nbsp;(8 d&eacute;cembre 2009)</em></h3> 
            <div class="introduction"> 
                <p>Le prix de thèse 2008 catégorie «&nbsp;Recherche appliquée&nbsp;» a été remis à  
<strong>François VAURETTE</strong> (IEMN, CNRS-Université de Lille) 
Jeudi 22 Octobre à l’occasion des J3N, à Toulouse</p> 
            </div> <!-- Fin introduction --> 
        </div> <!-- Fin extrait -->     
 
        <div class="extrait"> 
            <h3><a class="titre" href="spip.php?article21" title="lire la suite de l'article">Prix de thèse 2008 catégorie «&nbsp;Recherche de base&nbsp;» remis à Alexei OURJOUMTSEV</a><em>&nbsp;(8 d&eacute;cembre 2009)</em></h3> 
            <div class="introduction"> 
                <p>Le prix de thèse 2008 catégorie «&nbsp;Recherche de base&nbsp;» a été remis à  
     <strong>Alexei OURJOUMTSEV</strong> (LCFIO, IOTA, Palaiseau) 
Jeudi 22 Octobre à l’occasion des J3N, à Toulouse</p> 
            </div> <!-- Fin introduction --> 
        </div> <!-- Fin extrait -->     
    </div><!-- Fin colonne --> 
 
    <div class="col2"> 
        <div class="extrait"> 
            <h3><a class="titre" href="spip.php?article1" title="lire la suite de l'article">C’Nano</a><em>&nbsp;(8 d&eacute;cembre 2009)</em></h3> 
            <div class="introduction"> 
                <p>Le potentiel scientifique et technologique des nanosciences et nanotechnologies reconnu en 1976 par Richard Feynman «&nbsp;There is plenty of room at the bottom&nbsp;» s’est traduit par des programmes scientifiques comme la «&nbsp;National Natotechnology Initiative&nbsp;» aux Etats-Unis, et le programme National Nanociences en France.  aux Etats-Unis, et le programme National Nanociences en France.  et le programme National Nanociences en France.   
</p> 
            </div> <!-- Fin introduction --> 
        </div> <!-- Fin extrait -->     
 
        <div class="extrait"> 
            <h3><a class="titre" href="spip.php?article20" title="lire la suite de l'article">Prix de thèse 2008 catégorie «&nbsp;Interdisciplinaire&nbsp;» remis à Mélanie AUFFAN</a><em>&nbsp;(8 d&eacute;cembre 2009)</em></h3> 
            <div class="introduction"> 
                <p>Le prix de thèse 2008 catégorie «&nbsp;Interdisciplinaire&nbsp;» a été remis à <strong>Mélanie AUFFAN</strong> (Université Paul Cézanne, CEREGE – Aix en Provence) Jeudi 22 Octobre 2009 à l’occasion des J3N, à Toulouse</p> 
            </div> <!-- Fin introduction --> 
        </div> <!-- Fin extrait -->     
    </div><!-- Fin colonne --> 
 
 
</div><!-- Fin articles recents -->     
</body> 
</html>

Mon css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.portfolio {margin:0;padding:10px 0; margin-bottom: 30px; width:100%;} 
.portfolio h2 {text-align:center;font-size: 1.2em; line-height: 1em; font-weight: bold; margin: 0 10px; padding: 2px 0; 
    color:#FFF;background:#90090e!important;} 
.col2 {float:left;width:50%;padding:0;margin:0;border:none;} 
.extrait {line-height:1.2em;margin:20px 10px;padding:0; 
    } 
.nettoyeur{ clear: both; height: 0; margin: 0; padding: 0; border: 0; line-height: 1px; font-size: 1px; }

Merci d'avance

**CCyrillus** · 08/12/2009, 23h26

bonjour,

tu as probablement a faire avec le 'three pixel jog" de IE .
Pour t'en defaire , il te faut trouver un moyen d'absorber ces 3 pixels incompressible en plus des 100% cumuler des colonnes.

par exemple : .col2 {margin:0 -1px }

la tu recuperes 4 pixels sur tes deux colonnes .

Cet exemple est une possibilité parmis d'autres , tu peut reduire la largeurs des colonnes flottantes , appliquer la marge negative utile sur un seul coté ou un seul element , etc ....

GC

**charliejo** · 09/12/2009, 08h35

Je pensais pouvoir faire du vrai 100% mais si tu me dis que c'est pas possible, j'adopte ta solution.
Merci beaucoup.

**Macmillenium** · 10/12/2009, 23h19

Le comportement est décrit ici.

**Candygirl** · 11/12/2009, 13h42

Envoyé par CCyrillus

tu as probablement a faire avec le 'three pixel jog" de IE .

Sauf erreur le 3px jog ne concerne que IE6 et -; il est corrigé sur IE7. On a donc plutôt à faire au problème de calcul de % évoqué par Macmillenium.

Je proposerais plutôt une solution qui ne corrige le problème que sur les navigateurs qui rencontrent le problème plutôt que de faire un correctif général qui pourrait avoir un impacte selon le graphisme.

Perso j'ajouterais une classe sur la 2ème colonne:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="col2 ie">

avec le css dans un commentaire conditionnel:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!--[if lt IE 8]>
    <style type="text/css">
      .ie{width:49.99%;}
    </style>
<![endif]-->

**CCyrillus** · 14/12/2009, 20h19

oups , en effet , IE6 a du me traumatiser dans ma tendre enfance

. Si le prendre en compte suffit a corriger les ecarts des autres , l'explication ou suspicion est effectivement obsolete.

2 colonnes problème IE 7

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager