28172 sujets

CSS et mise en forme, CSS3

Centrage Background décalage d'un pixel

Bien le bonjour messieurs.
Alors je sollicite votre aide pour un problème auquel j'avoue ne pas trouver de solution.
Il s'avère que je n'arrive pas à avoir un centrage identique de l'image de fond entre firefox (3.0.4), ie6 et le reste. On voit le pixel de décalage sur les captures d'écran.
firefox:
http://diwatt.free.fr/firefox.gif
ie6,ie5:
http://diwatt.free.fr/ie6_ie5.gif
chrome,opera,safari,ie7:
http://diwatt.free.fr/chrome_opera_safari_ie7.gif

Cette image c'est simplement celle ci : http://diwatt.free.fr/bg4.gif

Un petit sample du code :
html:

<body>

<div id="page">

	<!-- HEADER -->
	<div id="header">
	
		<ul id="easy-access">
			<li><a href="#contenu">Aller au contenu</a></li>
			<li><a href="#actualites">Aller aux actualit&eacute;s</a></li>

			<li><a href="#navigation-sidebar">Aller au menu de navigation</a></li>
			<li><a href="#recherche">Aller &agrave; la recherche</a></li>
		</ul>
	[...]
	</div>

	<!-- RECHERCHE -->
	[...]
	
	<!-- MENU -->
	<div id="nav">

	<ul class="current">
		<li><a title="Retourner sur la page d'accueil" href="http://www.site.net">Accueil</a></li>
	</ul>
	<!--class="current_sub"-->
	<ul class="sub_active">
		<li><a title="Forum" href="http://www.site.net/forum/">Forum</a></li>
		<li><a title="Parutions" href="http://www.site.net/parutions">Parutions</a></li>

		<li><a title="Agenda" href="http://www.site.net/agenda">Agenda</a></li>
		<li><a title="Librairies" href="http://www.site.net/librairies">Librairies</a></li>
		<li><a title="Concours" href="http://www.site.net/concours.php">Concours</a></li>
		<li><a title="H&eacute;ros" href="http://www.site.net/heros">Les h&eacute;ros de la semaine</a></li>
		<li><a title="H&eacute;ros" href="http://www.site.net/edito_citation">Les &eacute;ditos et les citations</a></li>

		<li><a title="Le tournoi" href="http://www.site.net/tournoi">Le tournoi</a></li>
		<li><a title="Liens" href="http://www.site.net/liens">Liens</a></li>
	</ul>

	<ul class="select">
	<li><a title="Fantasy" href="/fantasy/">Fantasy
	<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a title="Novice ?" href="http://www.site.net/fantasy/novice.htm">Novice ?</a></li>

		<li><a title="Pr&eacute;sentation" href="http://www.site.net/fantasy/presentation.htm">Pr&eacute;sentation</a></li>
		<li><a title="Actualit&eacute;s" href="http://www.site.net/fantasy/news/index.htm">Actualit&eacute;s</a></li>
		<li><a title="Romans" href="http://www.site.net/fantasy/romans/index.htm">Romans</a></li>
		<li><a title="BD/Mangas" href="http://www.site.net/fantasy/bdmangas/index.htm">BD/Mangas</a></li>
		<li><a title="Cin&eacute;ma/TV" href="http://www.site.net/fantasy/cinema/index.htm">Cin&eacute;ma/TV</a></li>

		<li><a title="Auteurs" href="http://www.site.net/fantasy/auteurs/index.htm">Auteurs</a></li>
		<li><a title="Interviews" href="http://www.site.net/fantasy/interviews/index.htm">Interviews</a></li>
		<li><a title="Prix litt&eacute;raires" href="http://www.site.net/fantasy/prix_litteraires.htm">Prix litt&eacute;raires</a></li>
		<li><a title="Fantasy art" href="http://www.site.net/fantasy/fantasyart/index.htm">Fantasy art</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>
	</ul>

	<ul class="select">
	<li><a title="Univers" href="http://www.site.net/univers/">Univers
	<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
		<li><a title="Le Seigneur des Anneaux" href="http://www.site.net/film">Le Seigneur des anneaux</a></li>
		<li><a title="Bilbot le hobbit" href="http://www.site.net/hobbit">Bilbo le hobbit</a></li>

		<li><a title="Harry Potter" href="http://www.site.net/HP">Harry Potter</a></li>
		<li><a title="Les Chroniques de Narnia" href="http://www.site.net/narnia">Les chroniques de Narnia</a></li>
		<li><a title="A la crois&eacute;e des mondes" href="http://www.site.net/a-la-croisee-des-mondes">&Agrave; la crois&eacute;e des mondes</a></li>
		<li><a title="Eragon" href="http://www.site.net/eragon">Eragon</a></li>
		<li><a title="Conan" href="http://www.site.net/conan">Conan</a></li>

	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
	
	[...]
	
	</div>
	<!-- CONTENT -->
	<div id="content">
	[...]
	</div>
</div>
</body>


css:

body { /* CENTRAGE DE CE BACKGROUND */
	margin: 0;
	padding: 0;
	background: #eee url('images/bg4.gif') repeat-y 50% 0%;
	text-align: left;
	font-family: "Trebuchet MS", "Bitstream Vera Sans", Arial, sans-serif;
	font-size: 80%;
	color: #222;
}

[...]

/***********  WRAPPER **********/ 

#page {
	width: 950px;
	margin: 0px auto;
}

/***********  HEADER **********/ 

#header {
	width: 950px;
	height: 80px;
	margin: 0px auto;
	text-indent: -100em;
	overflow: hidden;
}

[...]

/***********  MENU **********/ 

#nav {
	position:relative;
	width: 950px;
	height: 32px;
	margin: 0px 0px 25px 0px;
	padding: 0px;
	border-top: 1px solid #fc6300 ;
	font-size: 13px;
	font-weight: bold;
	font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
	background: #FF993F url('images/barre-menu.gif') repeat-x;
}

[...]


Donc j'aimerai savoir si j'ai un moyen d'avoir un centrage identique ou pas. Merci de votre aide d'avance. Je sais bien que je pinaille mais ça gratte énormément mon coté fanatique du code.

<modération>Images trop larges supprimées.
Modifié par Julien Royer (15 Dec 2008 - 17:42)
Bonjour Diwatt,

Je me demandais de bon matin si ton problème n'avait un rapport très étroit (=16 ! Smiley rolleyes ) avec ce sujet ?
Je te laisse parcourir le sujet Smiley cligne

Cdt,
Sylvain
Je vais allez voir, lors de mes recherches sur le forum j'avais pas vraiment de mots clés pour trouver le bon résultat. Merci bien.
Sujet clos
Aller à