28173 sujets

CSS et mise en forme, CSS3

[résolu]Positionnement sur safari.

Bonjour,

En postant hier pour un problème de police, on m'a justement fait remarqué que sur safari, mon site s'affichait mal. Je tourne sur pc et j'ai aucun accès à un mac pour controller que l'affichage soit correct Smiley decu
Sur Firefox et Internet Explorer, l'affichage est identique. Sur safari par contre:
http://img218.imageshack.us/img218/701/image2ho4.jpg

Merci d'avance pour votre aide !

Voilà ma css:

html, body 
{
	height:			100%;
	margin: 			0;
	padding:			0;
}

html
{
	background-color:	black;
	background-image:	url("../design/main.gif");
	background-repeat:	repeat-y;
	background-position: 	center;
  font-family:		Comic Sans MS;
	font-size: 		.9em;
}

body
{
	background-image:	url("../design/head.gif");
	background-repeat:	no-repeat;    
	background-position:	top center;                    
	padding-bottom:		1px;
}

#global 
{
	position: 		relative;
	width: 			1005px;  
	height: 			100%;  
	min-height: 		100%;
	height: 			auto!important; 
	margin:			0 auto;
	_height: 			100%;
}

div#content
{
	padding-top:		200px;
	padding-bottom:		3em;
	margin-left: 		240px;
	width:			60%;
}


div#menu
{
	position: 		absolute;
	background-image:	url("../design/menu.gif");
	width:			143px;
	height:			223px;
	left:			12px;
	top:			46px;
}

div#news
{
	position:			absolute;
	width:			334px;
	height:			93px;
	top:			30px;
	left:			617px;
	overflow: 		auto;
}

div#foot
{
	position: 		absolute;
	bottom:			0;
	background-image:	url("../design/foot.gif");
	background-repeat:	no-repeat;
	width: 			1004px;
	height:			16px;
	margin-left:		-502px;
	margin-top:		-8px;
	left: 			50%;
}

et ma structure html:
<body>
	<div id="global">
	
		<div id="menu">
		</div>
		
		<div id="news">
		</div>
		
  	<div id="content">
			
		</div>
		
		<div id="foot">
		</div>
		
	</div>
</body>

Modifié par p_tite_jo (19 Sep 2006 - 21:12)
Remarque en passant : le padding-bottom: 1px; sur body fait que body aurait toujours pour auteur 100%+1px, soit un px de trop... et on aura alors systématiquement une barre de défilement vertical, même si ça n'est que pour faire défiler d'un pixel.

Sinon : avez-vous pensé à tester votre site sur une résolution inférieure à 1024px de large ? Votre bloc conteneur fait 1005px de large, c'est qui est trop important même pour une résolution de 1024x768. Même en négligeant totalement les 20-25% d'utilisateurs en 800x600, mieux vaut s'en tenir à des largeurs inférieures à 990px.

Le « bug » avec Safari ne se produit que lorsque la largeur de la fenêtre est un peu inférieure à 1024px... ce qui risque de se produire systématiquement pour les utilisateurs de Mac OS X ayant un écran en 800x600 : sous OS X, les fenêtres sont très rarement maximisées.

À noter que Firefox et Opera décalent également certains éléments dès que la largeur de la fenêtre est un peu trop faible (c'est à dire pour la majorité des utilisateurs).

Enfin, je vous conseille de remplacer votre 
html {font-size: .9em}
par 
html {font-size: 100%;}
body {font-size: .9em;]

À cause du bug suivant d'Internet Explorer :
http://web.covertprestige.info/test/10-bug-unites-relatives-em-et-ie-1.html
Modifié par mpop (15 Sep 2006 - 20:56)
Merci pour cette réponse claire et complète.
Le padding-bottom 1px est fait expres pour que la barre de défilement s'affiche... même si c'est pénible le scroll de 1px, ça m'enerve toujours moins que le site qui "bouge" quand on passe d'une page avec ascenseur à une page sans ascenseur...

Quant au reste, merci pour toutes ces informations.. j'en prends bonne note.

A bientot
p_tite_jo a écrit :
Le padding-bottom 1px est fait expres pour que la barre de défilement s'affiche... même si c'est pénible le scroll de 1px, ça m'enerve toujours moins que le site qui "bouge" quand on passe d'une page avec ascenseur à une page sans ascenseur...

Ça t'énerve toi. Mais peut-être les visiteurs de ton site qui utilisent un navigateur qui n'affiche pas de barre de défilement grisée (lorsqu'il n'y a rien à faire défiler) ont-ils l'habitude de ce comportement. S'ils en ont l'habitude, le fait de voir apparaître une barre de défilement les invitera automatiquement à faire défiler la page... même s'il n'y a rien à faire défiler.

Pourquoi lutter contre le comportement par défaut, surtout sur ce genre de détail, alors que les utilisateurs sont habitués à ce comportement ? Smiley cligne

Sinon, sur ce sujet :
http://web.covertprestige.info/test/09-barre-defilement-et-decalage-page-centree-1.html
Une méthode peut-être plus douce pour obtenir cet effet (avec certains navigateurs uniquement, par contre).
Sujet clos
Aller à