18041 sujets

Questions générales et questions de débutants

[Résolu] Problème de marge avec IE

Bonjour,

J'ai fait un site avec un div à gauche dans le contenu qui contient les sous-menu, jusque là tout va bien!

Mes sous-menu sont sous forme de liste, tout va bien jusqu'à ce que j'ajoute un span pour marquer le lien actif (cf PHP). IE m'ajoute une énorme marge en haut et en bas de l'élement de liste... (évidemment je n'ai pas ce problème avec firefox)

Est-ce que quelqu'un aurait une solution. Merci

A bientôt!

Le lien vers ma page test

Des bouts de code :

La css des sous-menu...

/* MENU SELON PAGE
*/

.smenu {
width: 200px;
padding: 5px 0;
border-top: #333 solid 1px;
border-bottom: #333 solid 1px;
}

.smenu h1, .smenu a, .smenu a:hover {
font-size: 12px;
}

.smenu h1 {
color: #333;
margin: 0 8px 5px 8px;
font-weight: bold;
}

.smenu a {
width: 200px;
text-indent: 16px;
color: #ccc;
padding: 1px 0;
display: block;
}

.smenu span a {
color: #ff9900;
background: #cc6633;
}

.smenu a:hover {
color: #ff9900;
background: #cc6633;
}

.smenu span a:hover {
color: #ccc;
}


Le code des sous-menu (ici l'accueil)...

<!-- SOUS-MENU SELON LA PAGE -->

<div class="smenu">
<h1>Accueil :</h1>
<ul>
<li><span><a href='index.php'>¤ Accueil</a></span></li>
<li><a href='index.php?page=acc/nio'>¤ Dernières news</a></li>
</ul>
</div>

Modifié par le rouge (28 Aug 2006 - 13:59)
Salut.

Tu n'arrives pas à corriger le problème en jouant sur les marges, padding, height & line-height (via les commentaires conditionnels) ?
Modérateur
bonjour,

moi non plus , je ne comprends pas , les listes et les liens ont parfois des comportement "inattendu", une marge de 3px sous chaque <li> , le bas des balise <a> qui n'apparait pas , etc ...

Face a ton probleme :

.smenu a {
float:left;
margin:0 -2px; 
}

appliqué en commentaire conditionnel semblerait faire disparaitre le defaut de cette ligne supplementaire , de quoi s'agit-il encore ? probleme de fusion de marge , ou tout simplement IE digere mal une balise stylisé en block lorsqu'elle se trouve dans un span ?

peut-etre serait t-il plus sure d'appliquer une id supplementaire a la balise <a > et de la styliser de cette façon , plutot que de l'encadrer dans un span , mais cela necessite de revoir le script php.

++


[/code]
Bonsoir,
ajouter un règle qui va conférer à ce SPAN le layout qui fait défaut ici résoudra le problème.
par exemple : 
.smenu span {display: inline-block;}
Modérateur
ha , c'est tout bête ,
En utilisant la devtoolbar et en ajoutant une id et un zoom:1; la proprieté (dans le dom explorer) haslayout reste invariablement a zero,
en tapant dans la barre d'adresse : javascript:alert(teste.currentStyle.hasLayout)
idem , resultat false pour le span !?

en reportant l'id teste sur le <a> le dom explorer me donne un valeur de -1 et le javascript me renvoit true ...
(pourquoi cela n'a pas marche sur le span ?)

!!?? cette histoire de layout , revient souvent et je pensais la devtoolbar ou le javascript fiable et rapide pour en connaitre l'etat.
apparement non ,
une fois la page telecharge en local , un test css avec zoom:1; (ou autre valeur conferant un layout a la balise concerné) semblerait en final le test le plus rapide pour evacué ce doute de layout conferé ou non . ..?
++

(pour ceux qui ne connaissent pas encore la devtoolbar de IE :
page de telechargement en anglais sur microsoft.com )
Hello,

Tout d'abord, merci pour ces réponses...

Malheureusmement, aucune de vos méthodes ne fonctionnent ou peut-être je me trompe...

La marge négative n'agit pas...

Le display block fait tout "buguer" et le display inline rend le span que sur les lettres et pas sur le bloc entier...

Tandis que le zoom à 1 n'agit pas...

Je ne comprends vraiment plus...

Merci!
Hello,
Tu as bien ajouté ceci par exemple : 
.smenu span {zoom:1;}


Parce que je viens de copier coller ton code pour essayer et ça fonctionne très bien.
Si tu veux voir je peux mettre provisoirement cette page en ligne.

@gcyrillus : je ne peux vraiment pas répondre car je n'ai jamais essayé la devtoolbar de IE
Les seules choses modifiées sont les liens vers les images et le fichier css, puis ce morceau de code ajouté : 
<style type="text/css">
.smenu span {zoom:1;}
</style>

Modifié par Alan (28 Aug 2006 - 14:13)
Ok, merci tu peux effacer...

J'ai résolu, j'avais oublier d'enlever le a sur ma css :

.smenu span a {zoom:1;}


au lieu de 

.smenu span {zoom:1;}


Tout fonctionne, merci bien!!!!!!
Sujet clos
Aller à