28172 sujets

CSS et mise en forme, CSS3

Grand (petit) mystère IE...

Bonjour,

Ce sujet a été traité mais sûrement dans un post que je ne trouve pas!
je sèche malgrés mes recherches

j'ai ce html:

<!-- premier div -->
<div id="a">
<p id="b">width:396px (avec bordures 1px) les bordures comptent</p>
<p id="c">width:396px (avec bordures 1px) les bordures comptent</p>
<h3><br />
<br />
(396+2)x2=800px (dimensions du conteneur) <br />
</h3>
</div>

<!-- deuxième div avec le padding au lieu des bordures -->

<div id="a">
<p id="b1">width:398px (sans bordures de 1px) </p>
<p id="c1">width:398px (sans bordures de 1px) </p>
<h3><br />
  <br />
  <br />
  <br />
  <br />
  <br />
  1px de padding dans chaque paragraphe mais pas de bordure : les 2px de padding remplacent les 2px de bordures...</h3>
</div>


avec ces id:


#a{ width:800px ;border:#00FFFF 1px solid; background-color:#FFFFFF; height:200px}
#b{width:398px; float:left; border:#009966 1px solid; background-color:#FFFF99}
#c{width:398px; float:left; border:#0000FF 1px solid; background-color:#66CCCC}
#b1{width:398px; float:left; background-color:#CCCC99; padding:1px}
#c1{width:398px; float:left;  background-color:#33FFFF; padding:1px}


Ca roule sur Firefox et Opera mais voyez ce que ça donne sur IE

upload/3373-titi.jpg

J'arrive pas à savoir pourquoi le paragraphe part à la ligne et prend toute la place dispo dans le conteneur.

ça doit être très c.. mais je trouve pas

merci de m'éclairer
Modifié par kayorn (20 Apr 2009 - 19:05)
Les <p> sont de type block, donc retour à la ligne automatique, le float:left est inutile ici.

Il prend toute la place dispo car ton conteneur fait 800 !!


Sinon, utilises les <br /> avec parcimonie, si tu as besoin de laisser de l'espace libre, met un margin-bottom.
Arthur69 a écrit :
Les <p> sont de type block, donc retour à la ligne automatique, le float:left est inutile ici.


a-tu visualisé dans firefox ou opera?

je veux créer 2 colonnes dans un conteneur, donc je fais 2 <p> de 400px au total que je veux avoir l'un à côté de l'autre.
(cet exemple simplifié vise à montrer mon pb sans s'encombrer avec du remplissage)

j'y obtiens exactement ce que je veux et sur ie non. si j'ôte les float:left dans firefox et opera, le <p> va directement à la ligne.
même en ajoutant display:inline
a écrit :
Sinon, utilises les <br /> avec parcimonie, si tu as besoin de laisser de l'espace libre, met un margin-bottom.


a écrit :
Il prend toute la place dispo car ton conteneur fait 800 !!


je force les dimensions des <p> à 398px
398+398+4 font bien 800px non? de plus les deux paragraphes tiennent l'un à côté de l'autre
dans opera et ffox .
Modifié par kayorn (21 Apr 2009 - 00:14)
Salut,

Je ne sais pas comment tu as obtenu ta capture d'écran, mais probablement pas avec (seulement) le code que tu nous donnes. J'ai testé sous ie6 et ça passe très bien : pas de retour à la ligne. As-tu une version de ta page en ligne ?
Modifié par marcv (21 Apr 2009 - 08:56)
Désolé, post soumis deux fois (avec le clavier), je sais pas comment j'ai fait. Si un modo peut supprimer...
Modifié par marcv (21 Apr 2009 - 08:57)
j'ai IE6 et je teste en local et en ligne
j'ai bien la capture du haut soit:
les deux paragraphes qui prennent tout le div et donc se placent l'un au dessous de l'autre.
J'ai créé une page avec ton code et comme tu peux le voir, il n'y a aucun problème sous ie6 (ou alors faut que j'amène le mien au garage Smiley smile ). Tu dis que tu testes en ligne : donne l'url qu'on aille voir.

En passant :
- tes <p> ne font pas 396px mais 398px
- tu as deux div avec id="a", utilise plutôt class="a".
Agylus a écrit :

Et pourtant, tu devrais regarder ta feuille de style :
http://www.barreau-ajaccio.fr/style.css

(Nouvel indice de l'enigme)


tu as raison.. si je lie la page à une autre feuille avec uniquement les id concernées ça ne le fait pas! mais ça vient de quoi, vois pas.

pourtant , les seuls pseudos sont du style 

#gnagna p

ou
#gnagna p:first-line

c'est où ?
Sujet clos
Aller à