28173 sujets

CSS et mise en forme, CSS3

[Résolu] Css : Problème avec des images sous IE

Hello à tous,

Etant très satisfait de vos réponses sur mes problèmes précédent, je reviens vers vous suite à quelques problèmes que je rencontre avec IE.

Je travail sous spip, et ma boucle pour afficher mes articles est : 
<BOUCLE_articlem(ARTICLES){par date}{inverse}{0,20}> <BOUCLE_premierdujour(ARTICLES){id_article}{doublons}><p>
 &nbsp; <img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;<span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong> </span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a> 
  </BOUCLE_premierdujour> 
  <BOUCLE_JOUR(ARTICLES) {jour_relatif=0}{doublons}{par date}{inverse} > 
  <br>                  
 &nbsp; <img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;<span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong></span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a> 
  </BOUCLE_JOUR>
  </BOUCLE_articlem>


Sous FF :
http://img213.imageshack.us/img213/4463/ffvw2.jpg

Sous IE :
http://img266.imageshack.us/img266/4190/iezu6.jpg

Si je supprime mon image <img src="IMG/graphisme/carre.jpg" width="8" height="8" class="picto">, il n'y à plus de le problème.
Modifié par twin (08 Sep 2007 - 19:07)
coucou Smiley smile

si ça provient de ton image, tu peux essayer dans ta feuille de style de mettre :
img {
border: 0;
padding : 0;
margin : 0;
}
ah ! ça vient peut être du bug expliqué dans la faq : Espaces indésirables sous les images

Mais je pensais à une chose : tes images, c'est pour symboliser des puces et donc, c'est du décor, ça n'a normalement rien à faire dans ton code html.

Il vaut mieux laisser à ta css le soin de s'occuper l'habillage.

Ce qui pourrait donner :
.dates{
background: url(IMG/graphisme/carre.jpg);
}


bon courage Smiley smile
Modifié par buh31 (31 Aug 2007 - 19:30)
Mouarf, j'adore ce forum ! On apprend toujours quelques chose de nouveau !
Je pense qu'en effet, le problème doit venir de la. Je te tiens au courant Smiley smile

(On vas encore attendre un peu avant de mettre Résolu)
Modifié par twin (31 Aug 2007 - 19:53)
Je viens d'essayer quelque chose comme sa; mais sa ne fonctionne pas :
<img src="IMG/graphisme/carre.jpg" width="8" height="8" class="picto">

picto {
border: 0;
padding : 0;
margin : 0;
display: block;
background: url(IMG/graphisme/carre.jpg);
}


Je pense que je ne dois pas très bien m'y prendre Smiley ohwell
On va essayer de faire un truc basique, sur un nouveau document, que tu essaieras d'adapter à ton code spip.

code xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <ul class="dates">
        <li><strong>12/08 :</strong>Titre de l'actu</li>
        <li><strong>12/08 :</strong>Titre de l'actu</li>
        <li><strong>12/08 :</strong>Titre de l'actu</li>
        <li><strong>12/08 :</strong>Titre de l'actu</li>
    </ul>
</body>
</html>


code css :
/* CSS Document */
*{
padding: 0;
margin: 0;
border: 0;
}

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 10px;
}

.dates li{
list-style: none;
background : url(carre.gif) no-repeat 3px;
padding-left : 15px;
}


j'utilise une image en 8x8 pixels : http://img299.imageshack.us/img299/5039/carreuk7.gif

J'ai testé, et ça s'affiche de la même manière sous ie et ff.

Donc, il faut que tu modifies ton code spip pour pouvoir afficher ta liste sous une forme de liste :

	<ul class="dates">
        <BOUCLE_JOUR(ARTICLES) {jour_relatif=0}{doublons}{par date}{inverse} > 
            <li><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a></li>
        </BOUCLE_JOUR>
    </ul>
Yes, on se rapproche du résultat. Merci de ta patience et de prendre le temps de m'expliquer Smiley cligne
Après quelques modifs, j'ai cela : 
<BOUCLE_articlem(ARTICLES){par date}{inverse}{0,20}> <BOUCLE_premierdujour(ARTICLES){id_article}{doublons}>
<ul class="test2">
&nbsp;<li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong> </span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a> </li> 
</BOUCLE_premierdujour> </ul>
 <ul class="test2">
        <BOUCLE_JOUR(ARTICLES) {jour_relatif=0}{doublons}{par date}{inverse} > 
            <li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong></span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a></li>
        </BOUCLE_JOUR>
    </ul>
  </BOUCLE_articlem>


Dans mon css, j'ai : 
  .test2 li{
list-style: none;
background : url(IMG/graphisme/carre.jpg) no-repeat 3px;
padding-left : 15px;
font-family: verdana;
font-size: 11px;
color: black;
text-decoration: none;
font-style: normal;
}


Donc la mon problème, c'est l'espace entre la première actu du jour et le reste de la liste. (mais je pense pouvoir le supprimer).
Mon souci, c'est surtout l'espace qu'il y a sur la gauche; comment le supprimer ?
Ainsi que celui qui est crée avant la liste de mes actus ?

Voici l'image :
http://img296.imageshack.us/img296/2981/souciskw3.jpg

En tous cas, on se rapproche Smiley cligne
Modifié par twin (01 Sep 2007 - 09:08)
il te faut essayer de supprimer les paddings et margins de tes listes en essayant :

.test2 ul, .test2 ul li, .test2 ul li a, .dates{
margin: 0;
padding: 0;
}


si tu as une url de test, ce sera plus facile de repérer d'où vient le pb.
Malhereusement, je travail avec easy php en local.
Mais la j'ai réussis à supprimer un saut de ligne entre les 1ére actus du jour et la reste des actus du jour. Il me reste encore 2 choses à corriger,

- Avec IE et FF : Supprimer l'espace qui est à gauche de chaque actus.
- Avec IE : Supprimer l'espace en haut de mon bloc avec les actus.

Voici ce que cela donne en image :
(edit) http://img116.imageshack.us/img116/6067/alsacreationwy7.jpg (/edit)
EDIT de modérateur : attention à ne pas afficher d'images géantes qui déforment le forum.

Voici le code de mon tableau : 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="4%" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir-inv.png" width="8" height="8"></td>
    <td width="96%" background="IMG/graphisme/fond_vert.jpg"  class="jour"> Suite des actualit&eacute;s </td>
  </tr>
  <tr>
    <td colspan="2" valign="top">
 <BOUCLE_articlem(ARTICLES){par date}{inverse}{0,20}> <BOUCLE_premierdujour(ARTICLES){id_article}{doublons}>
<ul class="test2">
<li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong> </span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a> </li> 
</BOUCLE_premierdujour>
        <BOUCLE_JOUR(ARTICLES) {jour_relatif=0}{doublons}{par date}{inverse} > 
            <li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong></span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a></li>
        </BOUCLE_JOUR>
    </ul>
  </BOUCLE_articlem>
  <a href="#"><img src="IMG/graphisme/home_centre_archives.jpg" width="488" height="21" border="0" align="right"></a></td>
    </tr>
</table>


Pour la partie css, voici celle utilisés : 
  .test2 li{
list-style: none;
background : url(IMG/graphisme/carre.jpg) no-repeat 3px;
padding-left : 15px;
}

a.sslien_home {
	font-family: verdana;
	font-size: 11px;
	color: black;
	text-decoration: none;
	font-style: normal;
}
a:hover.sslien_home {
    color: #707070;
	font-family: verdana;
	font-size: 11px;
}

.dates {
	font-family: verdana;
	font-size: 11px;
	color: #8DC63F;
	text-decoration: none;
	font-style: normal;
}


Désolé pour les explications...j'essaye de faire au plus simple; mais cela n'est pas évident Smiley ohwell
En tous cas, merci pour ton aide Smiley cligne
Modifié par Raphael (01 Sep 2007 - 17:07)
grrr, je viens de constater un autre problème sous IE (7) :
Il y a un saut de ligne sous mon image "voir les archives" donc
<a href="#"><img src="IMG/graphisme/home_centre_archives.jpg" width="488" height="21" border="0" align="right"></a>

Et cela donne :
http://img145.imageshack.us/img145/1120/grrrqt6.jpg

Je commence par le plus y croire ! Sa fait 2 heures que je me prend la tête dessus...et sans succés ! La je prend vraiment aucun plaisir à programmer... Smiley decu
Comme je te l'ai dit, ça doit provenir de pbs avec tes paddings, et tes margins, que tu dois mettre à zéro.

Pour l'analyse et la résolution de ce type de pb, moi j'e te conseille d'utiliser l'extension firefox firebug.

Ca te permet de voir sur un élément que tu es entrain de survoler les différents paddings, margins, et borders de ta page, qui sont colorés.

Je te montre une capture de ce que ça donne

Pour ce qui est du plaisir de programmer, disons que le test et le déboguage fait partie du taf quand on code, donc faut s'y faire Smiley lol
Désolé...une dure semaine. Donc je viens tout juste d'essayer.
Mais les margin et padin décale les actus sur les puces...

Comment faire pour qu'il se colle à la marge de gauche et non sur la puce ?

(sinon très sympa ton blog...sobre mais très jolie Smiley cligne )
Modifié par twin (07 Sep 2007 - 19:29)
Je suis un boulet...j'avais pas regardé le fichier au dessus avec : 
*{
padding: 0;
margin: 0;
border: 0;
}


J'écrivais cela dans dates...
Mais en fait tous fonctionne niquel...Sauf un autre problème, mais que je vais essayer de résoudre moi-même ! J'ai essayé l'extension de FF, elle est génial.

Merci pour ton aide en tous cas; c'est super sympathique Smiley cligne
Sujet clos
Aller à