28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Alignement vertical désastreux d'un cadre dans IE (seulement

Bonjour.

Voici la structure de ma page

http://xs319.xs.to/xs319/07390/structure.png

Cadre "conteneur"
Cadre "entête"
Cadre "notes" en float droite
Cadre "menu" en float gauche
Cadre "contenant"
Cadres "texte"
Cadre "image" en float gauche
Cadre "bas" pour pousser le cadre "texte" vers le bas (clear: both;)
Cadre "pied" avec clear: both pour pousser le cadre

Pour éviter que le dégagement prévu par le cadre "bas" ne provoque un alignement sur les float "menu" ou "notes", j'ai été obligé d'introduire les styles 'oveflow: auto;' et 'heigth: 1%' au cadres "texte"

Jusque-là pas de soucis.

Voulant créer des cadres à bords arrondis, j'ai ajouté, pour voir, un cadre "cont_rond" au dessus du premier cadre "texte".

Code HTML du cadre :
          <div class="cont_rond">
            <div class="co_hd"></div>
            <div class="co_hg"></div>
            <div class="espace">
              espace
            </div>
            <div class="co_bd"></div>
            <div class="co_bg"></div>
          </div>


CSS :
    .cont_rond {
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: white;
    }
    .co_hg, .co_hd, .co_bg, .co_bd {
    width: 11px;
    height: 11px;
    font-size: 1px;
    }
    .co_hg {
    background-image: url(Img/Corner1_1.jpg);
    background-repeat: no-repeat;
    }
    .co_hd {
    background-image: url(Img/Corner2_1.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    float: right;
    }
    .co_bg {
    background-image: url(Img/Corner1_2.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
    }
    .co_bd {
    background-image: url(Img/Corner2_2.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;
    float: right;
    }


Résultats dans Firefox et Opera sans problème.
Mais Internet Explorer 6 aligne le cadre (et tout ce qui s'en suit) sur le bas de l'un des float "menu" ou "notes". En plus, il lui affecte une sorte de marge inférieure qui n'existe pas dans FFX ou Opera..
Il suffit que j'ôte les float du cadre "cont_rond" pour que ça se place correctement.
Il y a donc visiblement un "conflit" quelque part...

Page temporairement visible ici (comparer évidemment FFX et IE !) : http://fifracol.free.fr/Temp/Bug/modele_bug_cadre.html

Comment faire pour contourner le bug d'IE ?

Merci pour votre aide.
Modifié par Piteur511 (01 Oct 2007 - 17:13)
Modérateur
bonjour

Tu est en présence du "3 pixel jog" de IE.

IE impose une marge latérale de 3 pixel aux éléments flottants.
Cette marge se positionne a l'opposée du sens du flottement .
Cette marge n'apparait pas entre 2 éléments flottants.

Une marge négative sur l'élément repoussé peut dans ton cas suffire a rattrapé cette écart.

  .cont_rond {
    margin: 0px -3px;/* on rattrape le bug d'IE , 3pixel jog des flottants lateraux */
    padding: 0px;
    width: 100%;
    background-color: white;
    }


Ceci devrait suffire a faire remonté le contenu centrale.
GC
Modifié par gcyrillus (01 Oct 2007 - 00:43)
Alors là, je suis bluffé Smiley eek Welldone gcyrillus, j'en apprends tous les jours Smiley jap

Par contre Piteur511, connais-tu la proprièté -moz-border-radius ?
Cette propriété permet de produire des coins arrondis sans image :
-moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright
ou en raccourci 
-moz-border-radius: valeur unique (5px par exemple);

Cette propriété sera peut-être implémenté dans CSS3, et utilisable par tous les navigateurs respectueux des normes ( sous le nom de border-radius ?) en attendant si elle n'est reconnue que par les navigateurs Mozilla ( moteur Gecko ) et par certains moteurs qui prenne un peu d'avance et reconnaissent par anticipation border-radius, elle ne nuiera pas aux autres navigateurs, tu peux donc la rajouter dans ton fichier css Smiley cligne
6l20 a écrit :
Alors là, je suis bluffé Smiley eek Welldone gcyrillus, j'en apprends tous les jours Smiley jap
Bluffé ? Pas tant que moi, je t'assure ! Je suis É-PA-TÉ ! Merci, Gcyrillus !

Je note quand même que ça affecte (un tout petit peu) la présentation dans FFX : le cadre est légèrement décalé vers la gauche...

6l20 a écrit :
Par contre Piteur511, connais-tu la proprièté -moz-border-radius ?
Cette propriété permet de produire des coins arrondis sans image :
-moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright
ou en raccourci 
-moz-border-radius: valeur unique (5px par exemple);

Cette propriété sera peut-être implémenté dans CSS3, et utilisable par tous les navigateurs respectueux des normes ( sous le nom de border-radius ?) en attendant si elle n'est reconnue que par les navigateurs Mozilla ( moteur Gecko ) et par certains moteurs qui prenne un peu d'avance et reconnaissent par anticipation border-radius, elle ne nuiera pas aux autres navigateurs, tu peux donc la rajouter dans ton fichier css Smiley cligne

Oui, je connais un peu cette stylisation, mais j'attends qu'elle soit validée et que IE la reconnaisse (c'est -- malheureusement -- encore le navigateur le plus utilisé, et on DOIT, me semble-t-il, en tenir compte, quoi qu'on dise).

Non ? Smiley crazy

En attendant, il faut faire des contorsions multiples, bien ennuyeuses dès qu'on veut faire non seulement un cadre à coins ronds, mais encore mieux, un cadre entouré d'une bordure à bords ronds ! Smiley ohwell

Merci aussi 6|20 !
Modifié par Piteur511 (01 Oct 2007 - 10:27)
Aïe, aïe, aïe !

Je ne sais plus où en donner de la tête.

J'avais donc le modèle suivant : http://fifracol.free.fr/Temp/Bug/modele_bug_cadre.html
où l'on voit le cadre à coins ronds fautif ("cont_rond") tout en haut de la plage centrale.

J'ai appliqué la correction indiquée par gcyrillus et, en lieu et place du cadre "espace" contenu dans le cadre "cont_rond", j'ai placé les cadres "cadre_centre".
Tout va bien avec FFX ou OPERA, mais alors dans IE6, ce n'est pas pensable : fouilli complet --> les cadres sont bien positionnés et à la bonne taille (!), mais le texte se balade dieu sait ou ! : http://fifracol.free.fr/Temp/Bug/modele.html

Comment se fait-ce ? Et surtout comment pallier la chose ?
Modérateur
bonjour,

arf encore une particularité de IE qui te joue des tours Smiley smile .

Ton conteneur #contenu , n'est pas doté du célébre et obscur "layout" .
du coup le contenant a bien du mal a se positionner sur la page car il n'y a pas veritablement de valeur de réference valable pour IE (dimension , coordonées de l'espace occupée).

Un simple : height:1%; permet en principe de remettre les choses en place.

#contenu {
  margin-right: 220px;
  margin-left: 220px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 1px;
  height:1%;/* active un layout manquant dans IE */
}


IE, est , je pense responsable de certaines calvities .

GC


<edit>en ajoutant ensuite un position:relative; , cela va permettre aussi d'eliminer les autres defauts de positionement des elements contenus et rendre cette zone , la zone de reference pour les enfants .
Modifié par gcyrillus (01 Oct 2007 - 13:37)
gcyrillus a écrit :
arf encore une particularité de IE qui te joue des tours Smiley smile .

Big Vingt-doses l'aurait-il créé pour que qu'on apprécie son bonheur avec les autres navigateurs ? Smiley scream
gcyrillus a écrit :
Ton conteneur #contenu , n'est pas doté du célébre et
obscur "layout" .
du coup le contenant a bien du mal a se positionner sur la page car il n'y a pas veritablement de valeur de réference valable pour IE (dimension , coordonées de l'espace occupée).

Un simple : height:1%; permet en principe de remettre les choses en place.

#contenu {
  margin-right: 220px;
  margin-left: 220px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 1px;
  height:1%;/* active un layout manquant dans IE */
}

<edit>en ajoutant ensuite un position:relative; , cela va permettre aussi d'eliminer les autres defauts de positionement des elements contenus et rendre cette zone , la zone de reference pour les enfants .

En tout cas, je te remercie BEAUCOUP pour ton aide, gcyrillus ! Formidable : ça marche au poil !

Mais comme j'aime bien comprendre ce que je fais, pourrais-tu/quelqu'un pourrait-il m'orienter vers une aide qui me permette de bien comprendre le vocabulaire employé dans cette réponse ? Qu'est-ce qu'un "layout" (j'en ai entendu parler sur bien des forums, sans que je comprenne ce que c'est) ?

Du reste, ça fait trois fois qu'on m'indique qu'il faut ajouter un 'height: 1%;'. Finalement, quand le faut-il au juste (bon, tu me rassures un peu quand tu parles d'un «célèbre et obscur» "layout") ?

Entre nous, gcyrillus, auprès de quel gourou as-tu appris tous ces secrets ? Smiley smokin

Encore merci ! Smiley biggthumpup
Sujet clos
Aller à