28173 sujets

CSS et mise en forme, CSS3

Margin négatif et Firefox / IE6

Bonjour,

J'ai un iframe qui affiche un javascript fourni par Twitter. Je ne peux donc pas modifier de javascript. Celui-ci génère un code avec des puces <li>.

Le code de l'iframe est :
<html>
<head>
<base target="_parent">
<style>
body {
	background: #FFFFFF;
	font: 0.7em Verdana, Geneva, Helvetica, Arial, sans-serif;
}
a:link, a:visited { color: #000; text-decoration: underline; }
a:hover { color: #000; text-decoration: none; }
ul { 
	list-style: none;
	margin-left: -40px;
}

ul li {
	background: transparent url(images/sidebar_li.png) no-repeat 0px 5px;
	padding: 2px 0px 0px 10px;
}
</style>
</head>
<body>
Photos prises et envoyées avec mon mobile Sony K800i, message envoyés sur Twitter(<a href="http://twitter.com/yazerty" rel="nofollow">suivez-moi  [smile]</a> )...
<div id="twitter_div"><ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/yazerty.json?callback=twitterCallback2&count=3"></script>
</body>
</html>


Le problème se situe au niveau du margin-left fixé à -40px.

Sur Firefox les puces sont naturellement décallées par rapport au bord gauche de l'iframe si je ne mets pas margin:-40px. Mais sur Internet explorer (testé uniquement sur la version 6) naturellement c'est bien contre le côté gauche de l'iframe. Donc quand j'applique un margin:-40px j'obtiens un retrait de -40px aussi dans IE et ça me vire donc le texte hors de visibilité (ça coupe le texte).

J'ai cherche avec mon ami Google une solution à ce problème et j'ai trouvé une astuce qui consisterait à mettre un "margin : -40px !important ; "

Cependant cette page précise que cela marche "Pour qu'un style css ne soit appliqué exclusivement qu'à FireFox".

Or je ne sais pas comment cela rend sur d'autres navigateurs.

Quelle est la meilleure solution à appliquer dans le cas de cette iframe et de cette marge selon vous ?
Yazerty a écrit :

Cependant cette page précise que cela marche "Pour qu'un style css ne soit appliqué exclusivement qu'à FireFox".

Or je ne sais pas comment cela rend sur d'autres navigateurs.


Bonjour,
le !important n'est pas pris en compte (pour augmenter la spécificité (priorité) du selecteur) par IE6 et infèrieur dans le cas ou deux propriétés similaires se suivent et que la première est marquée !important. IE6 prendra donc en compte la dernière propriété et les autres navigateurs la première, mais cette méthode est à proscrire de par son manque de robustesse :
pas de compatibilité ascendante.

Ce n'est pas de cette façon que tu règleras ton problème.
Je te garantis rien mais essayes de le corriger en mettant un position:relative à ton UL.
Modifié par Hermann (10 Sep 2007 - 19:37)
Ok, ça m'arrange parce que je n'aimais pas trop cette solution non plus Smiley smile .

J'ai essayé le position:relative mais ça ne marchait pas.

Par contre ceci marche :

* { margin: 0; padding: 0; border: 0; }


Est-ce correct d'un point de vue compatibilité Smiley smile ?
J'ai dû mal comprendre ton problème...
Aurais tu la page en ligne?

Pour le code que tu donnes, je te conseil de lire ce billet Smiley cligne
Modifié par Hermann (10 Sep 2007 - 19:41)
Sujet clos
Aller à