Discussion :

[Julobox]

Bonjour à tous,

j'ai besoin d'un petit coup de main car je deviens complètement fou avec cette histoire de margin. Je m'explique, je suis en train de développer mon nouveau magazine en ligne sur une base Wordpress. Atant parti d'un thème simple, je suis en train de manipuler pour qu'il ressemble à mon projet initial.

L'adresse du site en constru: http://thewall.fr

Comme vous le voyez, les cadres d'images des article 1 à 6 sont collés horizontalement entre eux, tandis qu'il y a une marge de 6 px sur l'axe vertical. Voici le code correspondant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.home .recent-leads { width: 644px; }
  .home .recent-leads .secondary-post-bg { background: #444; display: block; width: 316px; height: 150px; margin: 0 0px 6px 0px; position: relative; }
  .home .recent-leads .title-insert h3 { margin: 4px 7px; line-height: 1.6em; }
  .home .recent-leads .title-insert h3 a { font-size: 14px; display: block; color: #f79b42; text-decoration: none; }
  .home .recent-leads .title-insert h3 a:hover { color: #fff; }

Alors pour avoir également une marge de 6 pixels entre ces 2 cadres, je sais pertinemment qu'il faut que je change le 0px du margin à gauche en 6px.

Et en effet, sous Firefox, notre ami à tous, celà fonctionne. Mais sous l'ignoble Internet Explorer, il se dit que la marge droite de 6 pixel est valable à droite du premier comme du second cadre, et donc, il prend 6 pixels en plus pour ce div. Ce qui, vous l'aurez compris, dégage en bas de page ma sidebar (en l'occurrence agrémenté du div de recherche).

Alors comment diable insérer une marge juste entre ces 2 cadres et non à droite du div "main" ?

Merci beaucoup!

[Er3van]

Pourquoi ne pas simplement différencier les deux types de cadres ? Cadres de gauches et cadres de droites ? Comme ça tu n'affecte le margin qu'aux cadres de gauche, et ton problème est résolu non ?

Le vrai problème ce n'est pas qu'IE rajoute une marge en plus, FF la met aussi, la seule différence c'est qu'avec IE, ta largeur totale ne peut dépasser de plus de 2 px ta largeur de fenêtre ( ou qqchose comme ça, Candy rectifiera )

[Julobox]

Et bien j'y ai pensé, celà semble en effet être la solution la plus simple.

Mais, étant dans une structure de blog wordpress, le contenu s'organise en fait en une liste normalement horizontale et là, pour le coup, avec 2 posts par ligne, puis retour à la ligne. C'est pourquoi, je ne peux différencier les colonnes, comme tu le dis...

CSS de cette partie à l'appui:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* ----------------------------------- home posts */
.home .left {  width: 644px; }
.home .main-post-bg { background: #444; display: block; height: 225px; position: relative; margin: 0 0 7px 0; width: 638px; overflow: hidden; }
  .main-post-bg .post-comments,
  .secondary-post-bg .post-comments { position: absolute; top: 0; right: 7px; z-index: 102; background: #f47a0e; border: 1px solid #ce6100; }    
    .post-comments a,
    .secondary-post-bg .post-comments a { font-size: 11px; color: #eee !important; display: block; height: 1.8em; line-height: 1.8em; width: 7.5em; text-decoration: none; text-align: center; text-transform: lowercase; } 
    .post-comments a:hover,
    .secondary-post-bg .post-comments a:hover { background: #ce6100;}
  .home .main-post-bg .title-insert,
  .home .recent-leads .title-insert { background: #000; bottom: 0; display: block; left: 0; position: absolute; width: 100%; z-index: 101; padding: 4px 0; /* opacity - move to sep. stylesheet */ filter: alpha(opacity=85); -moz-opacity: .85; opacity:.85; }
.title-insert h2 { margin: 8px 10px 7px; line-height: 1.4em; }
  .title-insert h2 a { display: block; color: #f79b42; text-decoration: none; }
  .title-insert h2 a:hover { color: #fff; }
.home .recent-leads { width: 644px; }
  .home .recent-leads .secondary-post-bg { background: #444; display: block; width: 316px; height: 150px; margin: 0 0px 6px 0px; position: relative; }
  .home .recent-leads .title-insert h3 { margin: 4px 7px; line-height: 1.6em; }
  .home .recent-leads .title-insert h3 a { font-size: 14px; display: block; color: #f79b42; text-decoration: none; }
  .home .recent-leads .title-insert h3 a:hover { color: #fff; }

Je précise pourtant que tout ceci est contenu dans une largeur de 644pixel.

Ceci étant, si quelqu'un me trouve un moyen alternatif de mettre en oeuvre ce que tu me dis, pourquoi pas...

[Candygirl]

Le vrai problème ce n'est pas qu'IE rajoute une marge en plus, FF la met aussi, la seule différence c'est qu'avec IE, ta largeur totale ne peut dépasser de plus de 2 px ta largeur de fenêtre ( ou qqchose comme ça, Candy rectifiera )

Je peux ?

Tu fais référence à mon poste plus bas qui parle du bug des 3px ? Le bug des 3px apparait lorsqu'on a un élément flottant et que le reste du flux s'écoule normalement sur le côté du flottant. IE6 a alors la fâcheuse habitude de rejouter 3px entre le flottant et le contenu adjacent.

Dans ce cas, le bug des 3px n'est pas en cause puisque l'élément recherche est aussi flottant (2 éléments flottants côtes à côtes = pas de bug des 3px).

Par contre tu as raison lorsque tu évoques le dépassement. IE6 ne tolère pas que le contenu sorte de son conteneur (enfin à l'exception des margin-négatif). Ainsi, par défaut, il agrandit le conteneur avec son contenu sans tenir compte du width comme il le devrait et c'est effectivement ce qui pose problème ici.

Et en effet, sous Firefox, notre ami à tous, celà fonctionne. Mais sous l'ignoble Internet Explorer, il se dit que la marge droite de 6 pixel est valable à droite du premier comme du second cadre, et donc, il prend 6 pixels en plus pour ce div.

Y a pas que l'ignoble IE qui se dit ça, tous les navigateurs se le disent (comme l'a relevé Er3van) mais cela n'a pas le même impacte, par contre. En effet, Sur IE6, vu qu'il n'accepte aucun débordement, il va étendre ton conteneur de gauche de 644 à 650px. Hors 650 + 316 (search) = plus que 960 donc IE6 n'a pas la place de les mettre côtes à côtes d'où passage en bas.

Par contre, sur tous les autres navigateurs (y compris IE7), le width de 644 est respecté, la marge dépasse donc du conteneur mais n'influence pas le positionnement du bloc de recherche.

Er3van a énoncé la solution; n'attribuer la marge qu'aux élément où elle est nécessaire. Autrement tu peux ajouter un overflow:hidden (avec les conséquences que cela implique) sur ton .home .recent-leads qui aura pour effet de cacher le dépassement et donc IE n'agrandira plus à 650px. Ce qui pourrait être une solution dans ton cas vu ce que tu dis plus haut:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.home .recent-leads { width: 644px;overflow:hidden;}

[Julobox]

Y a pas que l'ignoble IE qui se dit ça, tous les navigateurs se le disent (comme l'a relevé Er3van) mais cela n'a pas le même impacte, par contre. En effet, Sur IE6, vu qu'il n'accepte aucun débordement, il va étendre ton conteneur de gauche de 644 à 650px. Hors 650 + 316 (search) = plus que 960 donc IE6 n'a pas la place de les mettre côtes à côtes d'où passage en bas.

Exact, j'avais bien compris que de toute façon, mon code faisait dépasser un petit bout à droite, ce qui posait le problème de la siebar sous IE.

Je te remercie d'ailleurs de mettre le doigt sur le fait que je l'ai testé sous IE6 et pas IE7 (en effet, développer sur un mac et regarder toutes les 2 secondes sur mon PC portable à côté si ça colle, c'est un peu chiant...), je ne m'en étais pas rendu compte.

J'ai donc tenté de faire ce que tu me proposes (je ne connaissais en fait pas cette petite ligne toute bête)...

Nous disions donc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.home .recent-leads { width: 644px; overflow:hidden;}
  .home .recent-leads .secondary-post-bg { background: #444; display: block; width: 316px; height: 150px; margin: 0 6px 6px 0 ; position: relative; }

Et paf, ça colle pile poil.

Merci beaucoup pour votre réactivité à tous les 2.