28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background et couleurs entre FireFox et IE.

Bonjour !
Je débute en ce moment un Blog en utilisant le CSS pour la mise en page.
Je fait face à un problème insoluble.
J'utilise FireBug et CSS Toolbar pour vérifier mes erreurs mais je ne trouve pas de solution.
Alors que ma page s'affiche très bien sur FireFox elle comporte un soucis sous IE.
En effet les couleurs sont légèrement plus foncées lorsque je visualise ma page avec Internet Explorer 6 et le menu que j'ai ajouté en haut de ma page n'apparait pas de la même façon.
J'utilise le code suivant :
#top #menu {
float:right;
margin: 71px 0 0 0;
}
#top #menu ul {
margin:0px 0px;
padding:0px;
}
#top #menu li {
background: #363636;
display:inline;
font-family:inherit;
font-size:0.9em;
font-weight:bold;
list-style-type:none;
}
#top #menu li a {
background-color: #363636;
color:#969694;
padding: 0.5em 1em 1em 1em;
}
#top #menu li a:hover {
color:#acacac;
text-decoration:none;
padding: 1.3em 1em 1em 1em;
}

Pour que le fond des liens de mon menu soit mis en couleur. IE ne prend pas en compte cette couleur et ne l'affiche tout simplement pas !
Je n'ai pas hébergé mon site car je travail en local pour le mettre en forme aussi je vous ai pris des <<Photos>> du problème.
Voici le rendu sous Firfox ici tout est comme je le voudrais.
upload/16985-FireFox-Ok.jpg

Pourtant voici ce que ça donne sous IE
upload/16985-IE-Bug.jpg

Voila j'ai fait des recherche sur Google et sur ce Forum mais j'avoue que je ne sais pas exactement quoi taper pour expliciter mon probleme de couleur.

Voila merci d'avance d'avoir pris le temps de me lire et de me répondre, bonne journée.
Modifié par SuperGeoff (14 Jun 2008 - 10:07)
Bonjour et bienvenu sur le Forum Smiley smile

Pourrais-tu joindre à ton post précédent le code Html correspondant ?
Car en l'état c'est comme si tu nous indiquait une page et un chapitre sans nous donner le livre... Smiley cligne
Je ne savais pas exactement quoi poster voici donc le code correspondant au menu :
<body>
<div id="page">
	<div id="top-outer">
		<div id="top">
			<div id="search">
				<form id="searchform" action="http://abletonblog.olympe-network.com/" method="get">
					<div>
						<label for="search">Rechercher:</label> 
						<input id="texte" name="s"> 
						<input id="bouton_recherche" value="  " type="submit"> 
					</div>
				</form>
			</div>
			<div id="menu">
				<ul>
					<li><a href="http://abletonblog.olympe-network.com/">HOME</a></li> 
					<li><a href="http://abletonblog.olympe-network.com/">NEWS</a></li> 
					<li><a href="http://abletonblog.olympe-network.com/">FORUM</a></li> 
					<li><a href="http://abletonblog.olympe-network.com/">CONTACT</a></li> 				
				</ul>
			</div>
		</div>
	</div>


Voila veuillez m'excuser. Merci de vous pencher sur mon problème.
Je cherche toujours et je ne trouve pas de solution, y'a t'il des précautions à prendre avec les commandes : Background, ou Background-color ?
Merci encore de vous pencher sur mon soucis !
Bonjour,

Peux-tu mettre l'ensemble de ton code car avec ce que tu as posté on ne reproduit pas les screenshots que tu as mis en exemple.

Pour ton problème de couleur, utilises-tu une image pour le background ? Si oui, il arrive qu'il y ait une différence de couleur sur IE avec la même image (cela m'est arrivé avec des images créées avec Photoshop). Dans ce cas utilise PngOptimizer, cela règle ce souci.

bon courage
Oui merci de votre aide, je vais tout de suite aller voir ce qu'est PngOptimizer mais vous semblez avoir cerné mon premier problème.
Pour ce qui est du code, il est réparti dans plusieurs fichiers je ne voulais pas surcharger le forum en les mettant tous, le mieux que je puisse faire est de vous donner l'adresse de mon site sur lequel j'ai upluoader tout les fichiers, CSS et images.
Voici les liens pour les différents fichiers :
Voici le fichier CSS
Voici l'index
Il fait appel au Header,
ici
et au Footer,
ici
Normalement il y a tout ce que j'ai modifié.
Voila merci encore de votre aide !
J'ai utilisé PngOptimizer sur mes images et ça a résolut une grande partie des mes problèmes merci ! Reste le menu en haut qui ne réagit pas comme sous Firefox et je ne comprend pas pourquoi Smiley ohwell
Modifié par SuperGeoff (12 Jun 2008 - 12:01)
Je me demande si ce n'est pas la balise Background-Color sur les liens qui est différemment interprété, on dirait en effet que la balise n'est prise en compte que sous le texte du liens et pas sur l'ensemble du block ( qui est plus large car j'ai utilisé la fonction Padding )
Merci d'avance à ceux qui pourront m'éclairer sur ce point.
Le site est ici
Problème résolut, le menu était dans un bloc très ajusté et alors que Firefox l'agrandissait automatiquement pour que la commande <<padding>> marche IE ne le fait pas, il fallait agrandir le bloc pour laisser la place à l'affichage du menu.
Merci à tous pour votre aide !
Sujet clos
Aller à