28172 sujets

CSS et mise en forme, CSS3

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_jironimo_template_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é :


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;
}


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 !
Modifié par Florent V. (01 Nov 2008 - 18:07)
Bonjour,

Impossible de charger les images et le css, ta page est vraiment lourde....ou alors le serveur est extrêmement lent....du moins au moment ou j'y suis allé....
C'est normal le point ( . ) à la fin de l'url, qui mène a une page différente que si l'on le bouge?
Forgaria a écrit :
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.


Tiens, un flottant avec une marge de 35px qui double. Serait-ce, par le plus grand des hasards, le très classique Doubled Float-Margin Bug d'IE6? Smiley ravi
@RoseGrenouille :
Tout est fluide chez moi. Mis à part ce bug énervantissime. Peut-être une petit faiblesse passagère du serveur...

@Calak :
Euh... Je ne vois pas de point à la fin de l'URL...

@Florent V. :
Possible mais le bug apparait sous IE7.