Soucis css dans différents navigateur

Bonjour

Voila je developpe dans firefox mais quand j ai testé dans IE et Google Chorome j ai constaté une légere différence, rien de grave mais je voulais savoir si il n y a pas une sorte sufix a mettre pour dire si tel navigateur faire comme ceci... j ai essaye avec les
"
-webkit-
-moz-
-ms-
-o-
"
mais visiblement ça ne fonctionne pas (l erreur est dans le positionnement, j utilise une position absolute)
du coupe je me demandais si quelqu un aurais une solution pour ces navigateurs (et les autres egalement ca je pense les installer pour faire mes test.)


merci

Salut,

Pour IE, tu as les fameux commentaires conditionnels : voici un article

Les "préfixes vendeurs" CSS que tu indiques n'expriment pas des conditions, comme tu peux le lire dans cet article

Il est probablement possible, en tout cas je te le souhaite, de trouver une écriture CSS qui fonctionne sur tous les navigateurs "modernes", et de faire juste une exception pour les vieux IE grâce aux commentaires conditionnels. Les positionnements absolus, ça vaut le coup aussi de vérifier ce que ça donne sur tablette et smartphone...

Bonjour,

ces préfixes existent mais servent pour des propriétés non encore standardisées. Aussi bien la propriété position que la valeur absolute sont standardisées depuis longtemps et il n'y a pas de préfixe pour cela.
Par contre :
- les très vieux IE 6 et 7 comprennent de travers
- la plupart du temps les débutants utilisent trop position: absolute; (faute de savoir faire autrement) alors que c'est particulièrement casse-gueule et quasi tout le temps à éviter comme méthode de positionnement
- il n'y a pas vraiment de raison que Firefox et Chrome réagissent différemment, ça me fait penser qu'il y a un problème à côté/auparavant

Donc que cherches-tu à faire précisément ? Il sera temps ensuite de déboguer ce position: absolute; si c'est bien la meilleure manière de faire dans ton cas

ha bon tu utilise quoi alors pour positionné ?
enfin j ai appris avec position absolute et ca a toujours ete ... tu utilise position relative alors ? (autant apprendre )

enfin voila mon soucis illustre


Voila l image du dessus c est dans firefox et en dessous ie,
mon menu est a la bonne place dans firefox mais pas dans ie, ni dans aucun autre d ailleurs, il y a toujours un décalage... je comprend pas pourquoi car en général y a que dans ie que ça ne va pas correctement
voici la totalité du code de mon menu:

"

/* Menu images*/
/*Accueil*/
.item-101, .item-101:hover{
	background-repeat:no-repeat;
	padding-right:30px;
}
.item-101 a, .item-101:hover a{
	margin-left:-10px;
}
/*Présentation, Produits, Shop, Contact*/
.item-102, .item-103, .item-104,.item-105{
	background-image:url('http://localhost/Joomla_2.5.11/templates/atomic/images/bouton01.png');
	background-repeat:no-repeat;
	width:150px;
	height:44px;
}
.item-102:hover, .item-103:hover, .item-104:hover, .item-105:hover {
	background-image:url('http://localhost/Joomla_2.5.11/templates/atomic/images/bouton02.png');
	background-repeat:no-repeat;
	width:150px;
	height:44px;
}
/*Faq*/
.item-106, .item-106:hover{
	background-image:url('http://localhost/Joomla_2.5.11/templates/atomic/images/faq.png');
	background-repeat:no-repeat;
	width:56px;
	height:36px;
	margin-left:20px;

}
.item-106 a, .item-106:hover a{
	opacity:0;
}
/*Facebook*/
.item-107, .item-107:hover{
	background-image:url('http://localhost/Joomla_2.5.11/templates/atomic/images/fb.png');
	background-repeat:no-repeat;
	width:49px;
	height:39px;
	margin-left:20px;
}
.item-107 a, .item-107:hover a{
	opacity:0;
}

/* Menu Global*/
.menu {
	position:absolute;
	top:31px;
	left:50%;
	margin-left:-500px;
	text-align:center;
	padding-bottom:50px;

}
.menu li {

	float:left;
	list-style-type:none;
	margin-right:-8px;
}
.menu li a {
	color:#222;
	cursor:pointer;
	display:block;
	color:#666;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	margin-top:7px;
}

.menu li a, .menu li a:focus, .menu li a:hover {
	text-decoration:none;
}
.menu li a:focus, .menu li a:hover {
  outline:none;
}

"

enfin voila

Si je comprends bien, le problème vient du léger débordement (1 pixel à vue de nez) des boutons par dessus la barre noire tout en haut ? Serait-il possible d'avoir le CSS concernant cette barre noire ?

html {margin:0;padding:0;border:0;border-top:45px #3C3C3A solid;}

voila la ligne en question
(en un coup je me demande si c etais une si bonne idée de faire ca comme ca)

si non oui tu a bien compris c est le petit decalage mon soucis :s

je me souviens maintenant pourquoi j avais fait ca comme ca
j avais d abord fait un truc du genre
.search-bar{
position:absolute;
top:0px;
left:-20px;
background-color:#3C3C3A;
height:44px;
width:100%;
}
le soucis c est que le width déconnais, si je le met a 100% il ne rempli pas tout la longueur et si je l augmente j ai alors une scroll bare en dessous
du coup je l avais mis dans le html (qui ne sert a rien d autre dans ce cas si, il n englobe même pas tout le code -c est du joomla-)

hello
j ai resolu mon soucis toute seule finalement
j ai replacer le

html {margin:0;padding:0;border:0;border-top:45px #3C3C3A solid;}

par ceci:

.search-bar{
	position:absolute;
	top:0px;
	left:-20px;
	background:#3C3C3A repeat-x scroll 0 0;
	height:44px;
	width:102%;
}

je connaissais pas le " repeat-x scroll 0 0"

mais par contre je veux bien savoir ce que vous utilise a la place du position:absolute

merci en tout cas

De la doque en vrac :

http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

http://www.alsacreations.com/tuto/lire/1340-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

http://www.alsacreations.com/tuto/lire/1341-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

http://www.alsacreations.com/tuto/lire/1342-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

http://www.alsacreations.com/article/lire/1209-display-inline-block.html

... et tous les autres que tu peux trouver via une recherche sur Alsa avec le mot-clé positionnement.

Petite précision : si tu ne lis pas l'article mis en lien sur les commentaires conditionnels, ceux-ci ne sont plus supportés par IE10 et ultérieurs.

Bonne continuation.
Modifié par thierry (12 Sep 2013 - 16:23)

merci pour la doc je vais lire tout ca a mon aise
merci encore