28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage sous Chrome

Bonjour,

voila j'ai un problème: je crée une icône avec des div et des table html, je positionne le tout pour que ça ressemble à une table ronde avec 12 personnes autour et le problème est que cela ne donne pas le même résultat sous Firefox (où ça fonctionne très bien) et Chrome où ça bug aux niveaux latéral.

Voici un code html prêt à tester, si vous avez les 2 navigateurs, n'hésitez pas à regarder ce que cela donne, vous comprendrez mieux mon problème:

Code :

 
<div>
	<table border='0' cellpadding='0' cellspacing='0'>
		<tr align='center'>
			<td></td>
			<td align='center'>
				<table border='0' cellpadding='0' cellspacing='0'>
					<tr>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-bottom:-6px;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-bottom:-6px;'></div>
						</td>
					</tr>
				</table>
			</td>
			<td></td>
		</tr>
		<tr align='center'>
			<td valign='middle'>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-right:-6px;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-right:-6px;'></div>
			</td>
			<td align='center' valign='middle'>
				<div style='height:40px; width:40px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background-color:white; border:1px solid black;'><div style='text-align:center; color:grey;'>1</div></div>
			</td>
			<td valign='middle'>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-left:-6px;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-left:-6px;'></div>
			</td>
		</tr>
		<tr align='center'>
			<td></td>
			<td align='center'>
				<table border='0' cellpadding='0' cellspacing='0'>
					<tr>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-top:-6px;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border:1px solid black; text-align:center;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-top:-6px;'></div>
						</td>
					</tr>
				</table>
			</td>
			<td></td>
		</tr>	
	</table>
</div>


Merci d'avance pour votre aide Smiley biggrin
J'ai le même résultat sous Chrome 4.0.249.11 et sous Firefox 3.5.5 (mis à par le crènelage mais bon ça on y peut rien...)
Je crois que je me suis trompé de code , voici le code complet :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div>
	<table border='0' cellpadding='0' cellspacing='0'>
		<tr align='center'>
			<td></td>
			<td align='center'>
				<table border='0' cellpadding='0' cellspacing='0'>
					<tr>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-bottom:-6px;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-bottom:-6px;'></div>
						</td>
					</tr>
				</table>
			</td>
			<td></td>
		</tr>
		<tr align='center'>
			<td valign='middle'>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-right:-6px;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-right:-6px;'></div>
			</td>
			<td align='center' valign='middle'>
				<div style='height:40px; width:40px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background-color:white; border:1px solid black;'><div style='text-align:center; color:grey;'>1</div></div>
			</td>
			<td valign='middle'>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-left:-6px;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black;'></div>
				<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-left:-6px;'></div>
			</td>
		</tr>
		<tr align='center'>
			<td></td>
			<td align='center'>
				<table border='0' cellpadding='0' cellspacing='0'>
					<tr>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-top:-6px;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border:1px solid black; text-align:center;'></div>
						</td>
						<td>
							<div style='height:12px; width:12px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; border:1px solid black; margin-top:-6px;'></div>
						</td>
					</tr>
				</table>
			</td>
			<td></td>
		</tr>	
	</table>
</div>



</body>
</html>


La je viens de tester avec chrome 4 et FF et ça ne donne pas le meme resultat (au niveau des ronds latérals du cercle: bien sur FF pas bien sur Chrome...)
Sujet clos
Aller à