28120 sujets

CSS et mise en forme, CSS3

[Résolu] Problème Display:table-cell sous Safari

Salut à tous !

Je viens une nouvelle fois solliciter votre aide !
Je viens de remarquer un problème avec ma disposition de ma page sous Safari... Je viens de remplacer la dispostion de mes deux blocs "news" et "sidebar" en display:table-cell comme j'ai pu le voir dans le très bon livre de Raphael ! (Jusqu'à présent ils étaient en float).
Tout marche sous Chrome Firefox Opéra et IE 6-7-8-9 (j'ai ajouter une autre feuille de style pour IE < 8 mais j'ai aussi un erreur avec mon header qui semble être coupé sur le dessus^^) mais sous Safari j'ai un problème : mon bloc News ne fait pas la bonne taille; il est plus petit ! Ne sachant pas d'où cela peu provenir, je vous demande votre aide !
Je vous met l'adresse de mon site ICI ainsi qu'une photo du problème et le code source !

Merci beaucoup Smiley smile

upload/42493-pb.jpg

Code HTML :

<!doctype html>
<html>
	<head>
		<meta charset=UTF-8>                              
		<link rel="stylesheet" type="text/css" media="all" href="styles/style.css" />
                <!--[if lt IE 8]>
                <link rel="stylesheet" type="text/css" media="all" href="styles/IEstyle.css" />
                <![endif]-->
	</head>
	<body>	
		<div id="wrapper">
        		<div id="header">
				<div id="logo">
					<h1><a href="/">Alexis SOUQUIERE</a></h1>
					<p>D&eacute;veloppeur Web - Programmeur C/C++</p>
				</div>
			        <div id="menu">
					<ul>
					    <li class="en_cours" ><a href="/">Accueil</a></li>
					    <li ><a href="creation.php">Mes Cr&eacute;ations</a></li>
					    <li ><a href="cv.php">Mon CV</a></li>
					    <li ><a href="contact.php">Contact</a></li>
					</ul>
				</div>
			</div>	
			<div id="content">
            	                <div id="news">
                    			texte             	
                                </div>
                                <div id="sidebar">
                                        Liens
                                </div>
                      </div>
		      <div id="separation"> </div>
                      <div id="footer">	
                                Footer
                      </div>	
		</div>
	</body>
</html>


Code CSS :

#wrapper {
	position: relative;
	width:1024px;
	min-height:100%;
	margin:0 auto;
}
#content {
	width:944px;
	display:table;
	overflow:hidden;
	padding:20px 40px;
	padding-bottom:40px;
	background: #cccaad;
	border-radius: 10px;
	behavior: url(styles/PIE.htc);
}

#news {
	width:640px;
	display:table-cell;
	border-right:1px solid #a7a37e;
}

#sidebar {
	width:290px;
	display:table-cell;
	padding-left:10px;
}

Modifié par alexasm15 (29 Feb 2012 - 20:42)
Salut,

Mon petit doigt me dis que c'est safari qui est dans le bon.

Il faut revoir les tailles de tes div, par exemple header est à 1024px alors que ton content est à 944px. Donc ça me semble fort logique qu'il déborde.
Salut,

Sous webkit (le moteur de rendu de safari et chrome, entre autres) la propriété box-sizing (qui gère le modèle de boîtes) est automatiquement en border-box quand l'élément a la propriété display: table;.

Comme webkit est le seul à faire ça, tu peux mettre : -webkit-box-sizing: content-box; sur ton élément #content, ça devrait faire l'affaire.
Gili a écrit :

Il faut revoir les tailles de tes div, par exemple header est à 1024px alors que ton content est à 944px. Donc ça me semble fort logique qu'il déborde.


Salut !

944 pixels mais il y a 2 fois 40 pixels de padding Smiley smile Donc je pense que ça fait bien la bonne taille non ?
Effectivement mais je ne vois pas de padding sur ton header, peut être sur #menu, ce qui est sensiblement différent. Je te conseil d'essayer, je l'ai fais chier moi et ça fonctionne Smiley smile
Kaelig a écrit :

Comme webkit est le seul à faire ça, tu peux mettre : -webkit-box-sizing: content-box; sur ton élément #content, ça devrait faire l'affaire.


Salut Kaelig !

Je viens de tester ton bout de code mais sans succès...
Si le problème vient de webkit cela devrait aussi le faire sur Chrome non ?


PS: Je vais tester alors Gili !
Modifié par alexasm15 (29 Feb 2012 - 20:21)
Donc en modifiant le taille de mon #content effectivement cela marche sous safari il fait bien la bonne taille mais maintenant c'est sur les autres navigateurs que le content fait 1024 + 40 pixels de padding...
Pardon tu as raison, apparemment seul Safari le fait.

Deux solutions :

1. display: block au lieu de display: table sur #content (je sais pas ce que ça donnera sous IE)
2. ajouter à #content "-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ", passer sa largeur à 944+40*2 = 1024px (c'est un peu trop d'ailleurs, essaie de réduire à 970px maximum).
Je viens de tester par hasard un min-width a la place du width tout court sur le content et ça marche...^^
C'est à ne plus rien y comprendre !

Edit: je vais quand même tester ta solution kaelig merci =)
Modifié par alexasm15 (29 Feb 2012 - 20:33)
Ce qui est étonnant, c'est que Safari force le modèle de boîtes "box-sizing: border-box" sur un élément en display: table !
Bizarre chez moi ça fonctionne bien sur les deux navigateurs.

Edit: ah oki, tant mieux alors Smiley smile

Bien à toi.
Modifié par Gili (29 Feb 2012 - 20:35)
Je viens de tester le display:block et ça marche également.
Par contre l'autre solution non.

En tout cas je vous remercie de votre aide !
Bizarre, chez moi les deux solutions fonctionnent (testé sous Firefox, Chrome et Safari).

Content d'avoir pu t'aider !
J'ai compris pourquoi avec le display:table du content cela ne marchait pas...
Je viens de relire le passage sur le positionnement dans le bouquin de Raphael :
"Rendu de type tableau pour un élément c'est a dire de type bloc mais qui n'occupe que la largeur du contenu" donc ici 944 pixels !
Par contre allez savoir pour ça ne marchait pas que sur safari !
Je viens de t'expliquer pourquoi sous Safari le rendu est différent : le box-sizing est forcé en border-box. Alors que sous les autres navigateurs il est en content-box.
Sujet clos
Aller à