[CSS] - 3 pixels jog et autres joyeusetés

Dev
1

Bonjour !

Je suis en pleine phase de debugging IE et évidemment, tout ne se passe pas comme prévu…

En premier lieu, un petit lien vers le site en question : http://www.jironimo.com/leadbay/leadbay_ji…plate_test.html

  1. A priori, je rencontre le bug du 3 pixels jog sur les deux premiers blocs en bas à droite.
    Idéalement, les champs du 2ème bloc sont calés à 28 pixels de hauteur sur les lignes du 1er bloc… Ce n’est pas le cas ici : à 3 pixels près. Comment faire ?

  2. Plus gênant : le 3ème bloc est décalé de 35 pixels vers la droite soit l’exact espacement en largeur de tous mes blocs… Impossible de trouver la faille.

Un petit coup de pouce ?

Voici le CSS incriminé :

[code]html, body {
background-color:#0054A6;
background-image:url(http://www.jironimo.com/leadbay/bg_site.jpg);
background-repeat:repeat-x;
margin:0px;
padding:0px;
text-align:center;
}

a {
color:#7E7E7E;
text-decoration:none;
}

img {
border:none;
}

#page {
background-image:url(http://www.jironimo.com/leadbay/bg_page.png);
color:#7E7E7E;
font-family:“Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
font-size:62.5%; /* Resets 1em to 10px */
margin:0px auto;
padding:39px 60px 35px 60px;
width:700px;
}

#logo {
float:left;
height:52px;
margin:0px 0px 39px 0px;
width:220px;
}

#slogan {
float:left;
height:32px;
margin:11px 0px 0px 20px;
width:154px;
}

#telephone {
float:right;
height:31px;
margin:12px 0px 0px 0px;
width:189px;
}

#header {
float:left;
height:300px;
margin:0px 0px 35px 0px;
width:700px;
}

#bloc_1 {
background-color:#F4F4F4;
background-image:url(http://www.jironimo.com/leadbay/bloc_1_titre.jpg);
background-repeat:no-repeat;
color:#7C7C7C;
float:left;
font-size:1.1em;
height:162px;
line-height:1.3em;
margin:0px 35px 35px 0px;
padding:33px 15px 15px 15px;
text-align:left;
width:180px;
}

#bloc_2 {
background-color:#F4F4F4;
background-image:url(http://www.jironimo.com/leadbay/bloc_2_titre.jpg);
background-repeat:no-repeat;
color:#7C7C7C;
float:left;
font-size:1.1em;
height:162px;
line-height:1.3em;
margin:0px 0px 35px 0px;
padding:33px 15px 15px 15px;
text-align:left;
width:180px;
}

#bloc_3 {
background-color:#F4F4F4;
background-image:url(http://www.jironimo.com/leadbay/bloc_3_titre.jpg);
background-repeat:no-repeat;
color:#7C7C7C;
float:left;
font-size:1.1em;
height:162px;
line-height:1.3em;
margin:0px 0px 35px 35px;
padding:33px 15px 15px 15px;
text-align:left;
width:180px;
}

.plus {
background-image:url(http://www.jironimo.com/leadbay/bouton_en_savoir_plus.jpg);
background-position:bottom center;
background-repeat:no-repeat;
float:left;
height:177px;
width:180px;
}

#footer {
border-bottom:1px solid #DBDBDB;
float:left;
height:232px;
padding:0px 0px 35px 0px;
width:700px;
}

#ID {
color:#7C7C7C;
float:left;
font-size:1em;
height:232px;
line-height:1.2em;
margin:0px 35px 0px 0px;
text-align:left;
width:210px;
}

ul {
height:204px;
line-height:28px;
list-style:none;
margin:0px;
padding:0px;
}

li {
border-bottom:1px solid #DBDBDB;
height:28px;
}

.entry {
display:block;
float:left;
width:80px;
}

.information {
display:block;
float:left;
width:130px;
}

#contact_information {
float:left;
height:232px;
text-align:left;
width:210px;
}

label {
height:28px;
line-height:28px;
}

.champs {
background-color:#DBDBDB;
border-style:none;
color:#9D9FA2;
height:24px;
padding:6px 6px 0px 6px;
width:198px;
}

#contact_message {
float:left;
height:232px;
margin:0px 0px 0px 35px;
text-align:left;
width:210px;
}

.champs_message {
background-color:#DBDBDB;
border-style:none;
color:#9D9FA2;
font-family:“Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
height:168px;
margin:0px;
overflow:hidden;
padding:6px 6px 0px 6px;
width:198px;
}

#bouton {
float:right;
margin:21px -1px 0px 0px;
}

.clear {
clear:both;
height:0px;
}

#disclaimer {
color:#9D9FA2;
font-size:1em;
line-height:1.1em;
margin:35px 0px 0px 0px;
text-align:left;
}[/code]

Merci d’avance !

PS : Si vous voyez d’autres soucis, avez un avis à formuler concernant le code ou le design de la chose, n’hésitez surtout pas ! Je prends tout !

2

Je ne sais pas si ton soucis provient de là (peu de chance même), mais ton bloc form chevauche deux blocs DIV. En gros tu ouvres un DIV, tu démarres ton bloc form et tu refèrmes le DIV sans refermer le bloc form. Pas propre. Vaut mieux passer le bloc form en englobant.

Sinon pour ton soucis de positionnement, je pense qu’il provient de la manière dont tu déclare et agence ton formulaire. Tu ne déclare aucun retour à la ligne, mais d’affichage en bloc non plus. Donc pour le browser, les éléments sont placés à la suite (inline) et il les décale selon l’espacement horizontale dispo. Sauf que ça chie dans la colle vu qu’il a pas assez d’info pour faire le boulot correctement. :slight_smile:

Essaie peut-être de déclarer tes labels et ton boutton comme des blocs plutôt que comme des éléments inline, vu que c’est comme ça que tu les utilises. :crying:

3

Au lieu de placer tes 3 blocs avec des margin utilises un positionnement relatif, left xxx etc ça se passera bcp mieux et sur tout les browsers.
Le calcul des margin, padding étant différents, souples d’un browser à l’autre.

Dans la mesure ou ton contenu n’est pas dynamique, c’est une erreur de faire ton positionnement avec un float, margin, du moins pas recommandé.

4

[quote=“Forgaria, post:1, topic: 48524”]1. A priori, je rencontre le bug du 3 pixels jog sur les deux premiers blocs en bas à droite.
Idéalement, les champs du 2ème bloc sont calés à 28 pixels de hauteur sur les lignes du 1er bloc… Ce n’est pas le cas ici : à 3 pixels près. Comment faire ?

  1. Plus gênant : le 3ème bloc est décalé de 35 pixels vers la droite soit l’exact espacement en largeur de tous mes blocs… Impossible de trouver la faille.[/quote]

C’est le fameux double margin bug. Un float + margin = 2x la marge dans IE. Tu peux le corriger facilement en mettant tes blocs que posent problème en display:inline
http://www.positioniseverything.net/explor…led-margin.html

5

Comme dit dans le lien que tu proposes, il n’est pas censé ne pas se produire dans IE 7 ce bug ? Or là c’est le cas.

Phobosky, tu peux approfondir ta remarque sur le positionnement en float et margin ? J’avoue que je ne vois pas en quoi ce n’est pas recommandé, contenu dynamique ou pas ?

6

[quote=« Molokai, post:5, topic: 48524 »]Comme dit dans le lien que tu proposes, il n’est pas censé ne pas se produire dans IE 7 ce bug ? Or là c’est le cas.

Phobosky, tu peux approfondir ta remarque sur le positionnement en float et margin ? J’avoue que je ne vois pas en quoi ce n’est pas recommandé, contenu dynamique ou pas ?[/quote]

Dans ton cas, tu as 3 blocs à hauteur définie (si le contentu été dynamique pour le remplissage de ces blocs, je n’opterais pas forcément pour un alignement comme celui que je te proposes) car la longueur du bloc pouvant s’allonger elle couvrirait la zone en dessous.

Toi tu as juste besoin de définir une zone, avec une hauteur fixe (la hauteur max de tes 3 box) et de positionner tes blocs avec une position relative + un espacement left. Tu trouveras des infos pratiques un peu partout sur le net après un google rapide je t’ai trouvé ça http://fr.html.net/tutorials/css/lesson14.asp

Disons que chacun fait comme il le sent c’est certain, on a toujours la possibilité d’arriver à la bonne solution, mais dans ton cas bien précis je ferais comme ça.
Sachant que justement tu by-pass le problème des margin/padding foireux de IE :slight_smile:

Bon amusement.

7

Y a eu confusion, c’est pas moi l’initiateur du post. :slight_smile: Moi je cherche juste à en apprendre plus ou éventuellement à filer un coup de patte. En l’occurrence je n’avais jamais lu nulle part qu’on déconseille le positionnement flottant + margin.

Le problème que je vois avec ta solution, c’est que si pour une raison X ou Y il décide de modifier la taille de ses blocs, il devra recalculer tout le positionnement, alors qu’avec les margin, il est pas emmerdé, l’écartement ne bouge pas. Sémantiquement c’est aussi plus juste. C’est l’écartement entre les blocs qu’il cherche à définir (et donc le margin) pas la position du bloc.

8

Merci à tous pour vos réponses.

Que ferais-je sans les Zoniens !

9

Pour ce qui est de changer la largeur des éléments imaginons que tu passes de trois à deux columns et donc imaginons un div qui ferait le double de largeur:
[1][2][3] devenant [1][2-3] le bloc de droite[2-3] ici aura le même positionnement left que l’élément [2] de ta page d’origine.

C’était juste un avis vu le cas illustré, j’expliquais comment j’aurais effectué cette découpe et mise en page à sa place, comme je le dit plus haut chacun mets sa css à sa propre sauce, maintenant vu mon expérience, et ce cas précis à savoir une page statique, un layout 3 columns hauteur fixe, pour maximiser la compatibilité j’aurais fait cela comme ça :))

10

Vivi, je discute pour essayer de te tirer les vers du nez. :slight_smile: J’ai pas la prétention de tout savoir sur le sujet, loin de là, donc je challenge les avis histoire de creuser. :crying:

Si je reprend ton exemple, imaginons que ce soit les bloc 1 et 2 qui fusionnent, il sera obligé de déplacer non ? L’avantage que je vois au float et au margin par rapport à ta solution c’est que cela permet d’empiler un nombre de bloc indéfini de taille indéfini sans avoir besoin de retoucher la feuille de style.

11

[quote=« Molokai, post:10, topic: 48524 »]Vivi, je discute pour essayer de te tirer les vers du nez. :cry: J’ai pas la prétention de tout savoir sur le sujet, loin de là, donc je challenge les avis histoire de creuser. :stuck_out_tongue:

Si je reprend ton exemple, imaginons que ce soit les bloc 1 et 2 qui fusionnent, il sera obligé de déplacer non ? L’avantage que je vois au float et au margin par rapport à ta solution c’est que cela permet d’empiler un nombre de bloc indéfini de taille indéfini sans avoir besoin de retoucher la feuille de style.[/quote]

C’est pour cette raison que je suis parti sur des float.

Il s’avère que ce n’est finalement pas des plus pratique par rapport à l’orientation qu’a pris le design du site en question…

C’est ça les amateurs que voulez-vous !

:):rolleyes::crying: