28172 sujets

CSS et mise en forme, CSS3

Problème avec float sous ie

Bonjour à tous

je suis entrain de modifier une page html pour supprimer l'utilisation des tableaux <table> abusive. Je passe donc par une feuille de style css mais j'ai des problèmes d'alignement sous IE (version 6). Est-ce IE aurait des problèmes avec les flottant (sous firefox ça marche nikel) ?

pour ceux qui veulent voir il suffit de copier-coller ce code dans une page html :
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
  <style type='text/css'>
  #calque_principal #calque_1 .bloc_spec1
  {
    position:absolute;
    top:0px;
    left:0px;
    width:280px;
    font-size: 11px;
  }
  #calque_principal #calque_1 .bloc_spec1 .ligne_info
  {
    clear:left;
    float:left;
    padding-bottom:5px;
  }
  #calque_principal #calque_1 .bloc_spec1 .ligne_info .titre
  {
    float:left;
    width:60px;
  }
  #calque_principal #calque_1 .bloc_spec1 .ligne_info .sep
  {
    float:left;
  }
  #calque_principal #calque_1 .bloc_spec1 .ligne_info .content
  {
    float:right;
    padding-left:5px;
    margin-right:0px;
    padding-right:0px;
    width:205px;
  }
  </style>
  </head>
  <body>
<div id="calque_principal">
  <div id="calque_1">
    <div class="bloc_spec1">
      <div class="ligne_info" id="ligne_info_auteur">
        <span class="titre" id="titre_auteur">Auteur(s)</span>
        <span class="sep" id="sep_auteur">:</span>
        <span class="content" id="content_auteur">
          <div>
            TOTO<br />
            TITI<br />
          </div>
        </span>
      </div>
      <div class="ligne_info" id="ligne_info_editeur">
        <span class="titre" id="titre_editeur">Editeur</span>
        <span class="sep" id="sep_editeur">:</span>
        <span class="content" id="content_editeur">Edit</span>
      </div>
      <div class="ligne_info" id="ligne_info_collection">
        <span class="titre" id="titre_collection">Collection</span>
        <span class="sep" id="sep_collection">:</span>
        <span class="content" id="content_collection">coll</span>
      </div>
    </div>
  </div>
</div>
  </body>
</html>



merci à ceux qui pourront m'aider

PoichOU
Modifié par PoichOU (01 Jul 2008 - 16:42)
Bonjour,

Ta page possède t-elle un DOCTYPE ?

Sinon une page en ligne serait bien également Smiley cligne
merci pour lien mais j'ai bien un pattern que je pense correct dans ma page à l'origine (là j'ai essayé de prendre juste la partie qui me pose problème).

Mais je ne connaissais pas "le fameux mode Quirks" Smiley smile vous pensez que IE l'applique dans mon exemple ?

Pour la page en ligne voilà : http://www.j-nove.com/test/pattern.html


merci à vous 2 pour votre aide

PoichOU
PoichOU a écrit :
Mais je ne connaissais pas "le fameux mode Quirks" Smiley smile vous pensez que IE l'applique dans mon exemple ?

Si tu n'as pas de Doctype ou un Doctype HTML 4.01 Transitional sans URL de la DTD, oui. Si tu as un Doctype en bonne et due forme (ce qui est à priori le cas sur ta page en ligne), et pas de code «parasite» tel qu'un commentaire HTML ou un prologue XML placé avant le Doctype, non.

À propos de la page en ligne: si tu déclares du XHTML 1.0 Strict, il faut respecter la syntaxe XHTML. Et donc ta <meta> doit être refermée: <meta />

Ensuite, tu as un problème de validité HTML car tu as imbriqué un élément div (élément de type bloc) à l'intérieur d'un élément span (élément de type en-ligne), à savoir span.content. Certains navigateurs vont «corriger» automatiquement ton code invalide, et considérer par exemple que span.content doit être fermé dès que la balise <div> arrive (en gros, ils estimeront que tu as dû oublier de fermer ton span et donc le ferons pour toi). Du coup les styles appliqués à span.content ne servent à rien...

Toujours du côté du code HTML, ça manque un peu de paragraphes (pourquoi mettre des div partout?), de titres, et peut-être tout simplement d'un tableau sur deux colonnes (et trois lignes pour cet exemple).
Modifié par Florent V. (11 Feb 2008 - 16:14)
Merci pour tes remarques Florent.

Florent V. a écrit :
À propos de la page en ligne: si tu déclares du XTML 1.0 Strict, il faut respecter la syntaxe XHTML. Et donc ta <meta> doit être refermée: <meta />

C'est corrigé

Florent V. a écrit :
Ensuite, tu as un problème de validité HTML car tu as imbriqué un élément div (élément de type bloc) à l'intérieur d'un élément span (élément de type en-ligne), à savoir span.content. Certains navigateurs vont «corriger» automatiquement ton code invalide, et considérer par exemple que span.content doit être fermé dès que la balise <div> arrive (en gros, ils estimeront que tu as dû oublier de fermer ton span et donc le ferons pour toi). Du coup les styles appliqués à span.content ne servent à rien...

J'ai mis un <span> à la place de la <div> mais j'ai toujours le même problème.

Florent V. a écrit :
Toujours du côté du code HTML, ça manque un peu de paragraphes (pourquoi mettre des div partout?), de titres, et peut-être tout simplement d'un tableau sur deux colonnes (et trois lignes pour cet exemple).

Le code que je donne ici n'est qu'un extrait d'une page. En fait c'est fait exprès de ne pas mettre de tableau puisque la même page permet plusieurs affichages différents (il y a uniquement la feuille de style qui change).

pourtant ça marche sous firefox il devrait bien y avoir un moyen que ça marche aussi sous ie, non ?

merci de votre aide

PoichOU
j'ai trouvé Smiley biggrin il faut donner une largeur à la ligne_info

#calque_principal #calque_1 .bloc_spec1 .ligne_info
  {
    clear:left;
    float:left;
    padding-bottom:5px;
    [b]width:100%;[/b]
  }



Smiley cligne PoichOU
Hey poichou ....
Si tu peux éviter de mettre les noms des auteurs Bordas
dans les forums ce serait sympas pour eux Smiley cligne

M. F
Sujet clos
Aller à