28173 sujets

CSS et mise en forme, CSS3

Mise en page, Bug sous Internet Explorer

Bonjour à tous, voici mon problème, j'ai un problème de mise en page avec Internet Explorer 6 alors que sur FireFox tout fonctionne correctement.

Voici le problème en image tout d'abord :

http://cer-mmorpg.com/bug_firefox.jpg http://cer-mmorpg.com/bug_ie.jpg

Voila une marge se fait automatique sous Internet Explorer 6 et je ne sais pas d'ou elle vient.
J'ai pu remarquer que le souci venait dés que je mettais en place la ligne "float:left".
Je vous expose mon code si vous pouvez me venir en aide face à ce problème.

<ul class="liste">
  <li style="height: 70px;">
    <dl class="small" style="background-image: url(./img/articles/1s.jpg);">
    <dt><a href="article-3.html" title="Titre Article 3" class="t1">Titre Article 3</a><br /><span class="publi">Publié le 03 juillet 2007 à 23h45</span><br />Introduction du Titre Article 3</dt>
    </dl>
  </li>
  <li style="height: 70px;">
    <dl class="small" style="background-image: url(./img/articles/1s.jpg);">
    <dt><a href="article-3.html" title="Titre Article 3" class="t1">Titre Article 3</a><br /><span class="publi">Publié le 03 juillet 2007 à 23h45</span><br />Introduction du Titre Article 3</dt>
    </dl>
  </li>
</ul>


Et voici le code CSS qui va avec cette partie :
ul, li, dl, dd, dt {
        padding: 0;
        margin: 0;
        list-style: none;
}

ul.liste { display: block; }

ul.liste li { color: #999; background-color: #F4F4F4; padding: 5px; border-top: 1px solid #FFF; border-bottom: 1px solid #CCC; display: block; }

ul.liste li:hover { background-color: #EEE; border-bottom: 1px solid #999; }

ul.liste dl { background-repeat: no-repeat; position: relative; }

ul.liste dt { display: block; float: left; width: 50%; padding: 0 5px; }

ul.liste dd { display: block; float: left; }

dl.icon { padding-left: 25px; height: 30px; }

dl.small { padding-left: 95px; height: 70px; } /* Images Small pour Articles */


Je vous serai très reconnaissant pour votre aide face à ce bug de Internet Explorer. Si mon post se trouve pas au bon endroit, dites le moi. Merci de votre futur aide. J'y ai passé une journée à essayer de trouver une solution mais rien.
Modifié par Alfala (06 Jul 2007 - 11:08)
Jvois pas ton probleme de marge il se situe ou ? C'est quasi les meme les 2 images

Sinon t'as essayé :
* {
padding: 0;
margin: 0;
}


?

Peut etre un probleme de line-heigt à définir, qui n'est pas suffisament bas par défaut sur ie

Enfin jsitue pas trop a quelle endroit est la différence
Bonjour et bienvenue sur le Forum...

Pourrais-tu être un peu plus explicite sur ton problème de marge ?
Car en ce qui me concerne, je trouve tes rendus plutôt similaires... Smiley cligne
j'ai essayer avec "line-height: 1px" ou "height: 1px" ou "clear:both"

mais rien ne change, avez vous une idée ?
Bonjour,
Si tu avais une page en ligne cela me permettrait de tester in-situ avec Firebug. Comme par exemple, tester les balises <li> à la suite, sans retour charriot (dans le code html). Je ne suis pas sûr (ça marche pour supprimer l'espace des <li> en inline). Mais je ne peux pas tester Smiley smile Tant pis.
Il suffit d'enlever le float:left; sur le dt ec qui donne

ul.liste dt { display: block;width: 50%; padding: 0 5px; }

chez moi ca marche en tout cas
L'utilisation du float: left dans ce que je prévois pour la page actualites.html est utile pour la présentation que je désire.

Donc je suis assez bloqué, aurais t'il une solution annexe ?
Modifié par Alfala (06 Jul 2007 - 22:26)
J'ai rechercher et tester en utilisant <hr /> ou avec un div avec clear:both mais ca ne donne pas le résultat voulu.

Si quelqu'un pourrait m'éclaircir.
Bien j'ai rechercher, rechercher Smiley smile et j'ai trouver la solution en utilisant le Hack CSS
je vous remerci de votre aide en tout cas
bonne continuation à tous


Post [Résolu]
Sujet clos
Aller à