Pb de rendu CSS avec Chrome/Safari

Question

elekaj34

21 Dec 2011 à 18:38

Bonjour,

en HTML 5 :

<!DOCTYPE html>
<html>

J'ai un systeme d'onglets (associé a jQuery), dont le code est le suivant :


				<div id="onglets">
					<div class="onglet_conteneur">   
						<ul class="onglet_menu">
							<li><a href="#" accesskey="1" class="onglet_tab active">Onglet 1</a></li>
							<li><a href="#" accesskey="2" class="onglet_tab">Onglet 2</a></li>
							<li><a href="#" accesskey="3" class="onglet_tab">Onglet 3</a></li>
						</ul>

						<div id="content_1" class="onglet_contenu">blablabla</div>
						<div id="content_2" class="onglet_contenu">blablabla</div>
						<div id="content_3" class="onglet_contenu">blablabla</div>   
					</div>
				</div>

et le css :

#onglets { margin: 0px auto 0px auto; width:80%; } 

.onglet_conteneur 
{
	padding:8px;
}  
ul.onglet_menu 
{
	padding:0px 10px; 
	margin: 5px 0px 8px 0px;
}

ul.onglet_menu li 
{
	list-style:none;
	display:inline;
}            
ul.onglet_menu li a 
{
	color:#616161;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-weight:bold;
	font-variant: small-caps;
	border:1px solid #ccc;
	border-bottom:1px solid #333;
}

ul.onglet_menu li a:hover 
{
	background-color:#2f343a;
	border-color:#2f343a;
}

ul.onglet_menu li a.active 
{
	color:#333;
	border:1px solid #333;
	border-bottom: 1px solid #fff;
}            
.onglet_contenu 
{
	padding:10px; margin-top: 1px;
	border-top:1px solid #333; 
}

#content_2, #content_3 { display:none; }

Sous Firefox, Opera et Internet Explorer 8 sous WinXP, c'est OK, le rendu est nickel.
Sous Chrome et Safari, j'ai un décalage d'un pixel !!! Smiley bawling

Comment résoudre cela ? car sauf avec un coup de JS, je vois pas comment faire (en dehors du fait que la méthode ne me plaise pas du tout)

jmlapam

21 Dec 2011 à 19:12

Salut,

Ce serait plus efficace de donner un lien vers la page en question. Smiley cligne

elekaj34

21 Dec 2011 à 19:54

OK : voila http://elekaj34.free.fr/onglets/onglets.html

Si rajoute une directive height etou line-height dans la CSS ul.onglet_menu, le problème est résolu sauf pour firefox qui se met a avoir un decalage de 1px par rapport aux autres navigateurs.

jmlapam

21 Dec 2011 à 20:59

Ok,

Essaie cela:

html,body{
margin:0;
padding:0;
}

elekaj34

22 Dec 2011 à 07:47

J'avais déjà essayé, mais j'ai refazit le test

C'est OK pour tous les navigateurs sauf FF !!!

Sujet clos

CSS et mise en forme, CSS3

Pb de rendu CSS avec Chrome/Safari