Borders larges et coins en angle

Bonjour,
je suis en train de skinner un bog dotclear, et j'essaye de créer un border autour de chaque post de façon à ce que le coté gauche soit orange et le reste beige.

J'ai évidémment tout de suite fait

div.post {
border: 25px solid #ccc3be;
border-left: 25px solid #FF5E00;
}

Mais comme vous vous en doutez, ça m'a créé des bords qui finissent en angles à chaque coin. Et c'est pas e que je veux, d'où problème..

J'ai ensuite créé un border-left à chaque élément interne à la div.post
( le titre, le contenu, et les infos comme la date, chacun contenu dans une div)
Cela associé à une margn-left négative et un padding-left suffisant pour que tout soit bien reglé
ex:

.post-info { 
margin:0 0 0 -25px;
padding: 10px 20px 0 20px;
border-left: 25px solid #FF5E00;
}

Et ça marche !

Seulement le coin en bas à gauche, n'est pas de la bonne couleur, évidemment, puisque le dernier élément ne descend pas jusque là.
J'ai donc ajouté une margin-bottom négative à ce dernier élément accompagné du padding qui va avec.

Et ça marche !

Enfin.. sur firefox, pas sur ie
petite image pour illustrer :


Et là je bloque...
Comment faire pour avoir le même rendu sous firefox et ie ?
J'ai essayé avec une image orange en background au lieu d'un border-left de couleur, mais je n'ai pas réussi.
Si un doué de la css a déja eu affaire à un cas pareil, ou a une idé&e lumineuse.. je suis preneur.

Bonjour,

Deux blocs (DIV) imbriqués, celui à l'extérieur avec un border-bottom, et celui à l'intérieur avec un border-left. Pas de marges négatives ou padding superflus (notamment pas de padding sur le bloc extérieur).

Ah oui! J'ai oublié de préciser..

La structure est du genre

<div conteneur>
     <div titre></div>
     <div message></div>
     <div date></div>
</div>

Et je n'y ai pas accès, donc pas de retouche html
Modifié par BoraX (12 Dec 2008 - 15:24)