28173 sujets

CSS et mise en forme, CSS3

IE7 et width exprimé en relatif

J'ai un pb que je ne peux résoudre proprement.

Soit 

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Validation CSS</title>
    <style type="text/css">
    <!--
     body {width: 80%;}
     .col-3 {width: 33.333333333333333333333333333333%; float: left;}
     .col-31 {width: 33.33%; float: left;}
     .propre {clear: both; line-height: 0; font-size: 0; margin: 0; padding: 0; border: none;}
     .boite {border: solid 1px #121212; margin: 0 5px;}
    //-->
    </style>
  </head>
  <body>
      <div class="col-3"><div class="boite">Colonne 1</div></div>
      <div class="col-3"><div class="boite">Colonne 2</div></div>
      <div class="col-3"><div class="boite">Colonne 3</div></div>
      <br class="propre" />
      <div class="col-3"><div class="boite">Colonne 4</div></div>
      <br class="propre" />
    <!--[if IE]>
    <style type="text/css">
    <!--
     .col-31 {width: 33.31%; float: left;}
    //-->
    </style>
    <![endif]-->
      <div class="col-31"><div class="boite">Colonne 1</div></div>
      <div class="col-31"><div class="boite">Colonne 2</div></div>
      <div class="col-31"><div class="boite">Colonne 3</div></div>
      <br class="propre" />
      <div class="col-31"><div class="boite">Colonne 4</div></div>
  </body>

</html>


Sur un ecran résolution 1280 par exemple, la boite N°3 se place sur une nouvelle ligne.

Il semblerait que IE7 ne fasse pas un arrondi par défaut, ce qui est une erreur dans le cas d'espèce.
Hormis la bidouille de rechercher le multiplicateur pour IE avez-vous une autre solution

Merci
salut,
ben pourquoi au lieu d'attendre d'IE qu'il arrondisse, n'arrondis-tu pas de base, genre une colonne centrale à 34% et les deux autres à 33%, tu crois que ça se verra tant que ça... Il arrive un moment où l'infinitésimal est aussi périlleux que le pixel près permanent, du moins, je pense

Have swing
Bonjour aussi...

Il n'est pas réellement utile d'avoir de telles décimales dans tes valeurs de largeur...
Visuellement, 1% ne devrait commencer à se voir qu'au dela de 1280x960px. Mais qui y fera réellement attention ? Et parmi ceux là, qui va en être géné ?? Je pencherai pour 0,000000000000000001% des visiteurs (et là la virgule a une importance ! Smiley cligne
Modifié par Mikachu (03 Apr 2007 - 18:26)
Mikachu a écrit :
Bonjour aussi...

Il n'est pas réellement utile d'avoir de telles décimales dans tes valeurs de largeur...
Visuellement, 1% ne devrait commencer à se voir qu'au dela de 1280x960px. Mais qui y fera réellement attention ? Et parmi ceux là, qui va en être géné ?? Je pencherai pour 0,000000000000000001% des visiteurs (et là la virgule a une importance ! Smiley cligne


Bonjour et désolé pour l'introduction de mon précédent message.

Le problème ne réside pas dans la précision du multiplicateur. En effet le test avec quatre colonnes width: 25% ne permet d'afficher que 3 colonnes par ligne (et là il n'y a pas de virgule ! Smiley cligne ).


<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Validation CSS</title>
    <style type="text/css">
    <!--
     body {width: 80%;}
     .colonne {margin: 0; padding: 0; border: none;}
     .col-25 {width: 25%; float: left;}
     .col-3 {width: 33.3%; float: left;}
     .col-31 {width: 33.33%; float: left;}
     .propre {clear: both; line-height: 0; font-size: 0; margin: 0; padding: 0; border: none;}
     .boite {border: solid 1px #121212; margin: 0 5px;}
    //-->
    </style>
  </head>
  <body>
      <div class="colonne col-3"><div class="boite">Colonne 1</div></div>
      <div class="colonne col-3"><div class="boite">Colonne 2</div></div>
      <div class="colonne col-3"><div class="boite">Colonne 3</div></div>
      <br class="propre" />
      <div class="colonne col-3"><div class="boite">Colonne 4</div></div>
      <br class="propre" />
    <!--[if IE]>
    <style type="text/css">
    <!--
     .colonne col-31 {width: 33.31%; float: left;}
    //-->
    </style>
    <![endif]-->
      <p>ajustement pour ie7</p>
      <div class="colonne col-31"><div class="boite">Colonne 1</div></div>
      <div class="colonne col-31"><div class="boite">Colonne 2</div></div>
      <div class="colonne col-31"><div class="boite">Colonne 3</div></div>
      <br class="propre" />
      <div class="colonne col-31"><div class="boite">Colonne 4</div></div>
      <br class="propre" />
      <p>maintenant une colonne sans décimale</p>
      <div class="colonne col-25"><div class="boite">Colonne 1</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 2</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 3</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 4</div></div>
      <br class="propre" />
      <div class="colonne col-25"><div class="boite">Colonne 5</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 6</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 7</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 8</div></div>
      <div class="colonne col-25"><div class="boite">Colonne 9</div></div>
  </body>

</html>


Merci à tous
virtualgadjo a écrit :
salut,
ben pourquoi au lieu d'attendre d'IE qu'il arrondisse, n'arrondis-tu pas de base, genre une colonne centrale à 34% et les deux autres à 33%, tu crois que ça se verra tant que ça... Il arrive un moment où l'infinitésimal est aussi périlleux que le pixel près permanent, du moins, je pense

Have swing


Bonjour,

Dans le cas d'espèce mon pb ne se situe pas sur une page statique mais dans un contexte dynamique où le nombre de colonne est déterminé en fonction de la quantité de résultats à afficher.
Sujet clos
Aller à