28220 sujets

CSS et mise en forme, CSS3

[Résolu] IE grand farceur ?

Bonjour,

Je bosse actuellement sur un site temporairement hébergé ici : http://www.sitavoo.net/peresc (loin d'être terminé Smiley smile ).
La page qui me pose probleme est : http://www.sitavoo.net/peresc/historique.php

Et IE réagit vraiement bizarrement. Non pas qu'il interprete mal mes CSS, mais il ne les interprete pas toujours pareil ! C'est-à-dire que si je recharge la page, elle s'affiche différement !!! Smiley eek
En l'occurence, sur la page historique, j'ai des blocs centrés dans la page. Parfois il les affiche bien, parfois il les place à gauche. Avez-vous déjà rencontré ce genre de problème ?.


Autre question, d'ordre plus général, sur les CSS. Les boutons du menu du site changent de taille en position hover. Cela pose un probleme si l'on place la souris dans la zone de différence de taille : cela crée un papillottement.
Y a-t-il un moyen de déclarer une zone active, comme un bouton dans flash ?

Merci pour votre aide Smiley smile
Modifié par grand-mister (19 Jul 2005 - 18:12)
Nonon, seul la page d'accueil et la page "nos modèle" sont en flash. Tu n'as pas cliqué sur les liens Smiley cligne

(c'est vrai que j'ai oublié de préciser ça).

Je précise aussi que le problème d'IE n'apparait que en ligne. En local, ca semble fonctionner.
grand-mister : dans ce cas, peux-tu éditer ton premier post et mettre directement l'url d'une des pages intérieures du site ?

La page d'accueil en flash avec agression musicale ne prédisposera pas vraiment les contributeurs du forum à aller plus loin Smiley cligne
grand-mister a écrit :
Nonon, seul la page d'accueil et la page "nos modèle" sont en flash. Tu n'as pas cliqué sur les liens Smiley cligne

(c'est vrai que j'ai oublié de préciser ça).

Je précise aussi que le problème d'IE n'apparait que en ligne. En local, ca semble fonctionner.

Amusant ... j'avais justement cliké sur "nos modeles" Smiley smile
grand-mister a écrit :

Autre question, d'ordre plus général, sur les CSS. Les boutons du menu du site changent de taille en position hover. Cela pose un probleme si l'on place la souris dans la zone de différence de taille : cela crée un papillottement.
Y a-t-il un moyen de déclarer une zone active, comme un bouton dans flash ?


Non. Mais tu peux éviter ce comportement en donnant par exemple à tes boutons une marge invisible qui sera remise à zéro par le :hover, de manière à ce que le bouton ne change justement pas de taille.
Ceci passe sous les navigateurs serieux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
	<title>Gabarit 02</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<style type="text/css">

		* {
			margin:				0;
			padding:			0;
		}

		ul {
			list-style:			none;
			float:				right;
		}

		ul li {
			float:				left;
		}

		ul li a {
			background-color:	pink;
			padding-top:		50px;
			padding-left:		20px;
			padding-right:		20px;
			display:			block;
			text-decoration:	none;
		}

		ul li a:hover {
			border-bottom:		15px solid gray;
			padding-top:		35px;
		}

		div {
			clear:				both;
			height:				300px;
			background-color:	green;
		}

	</style>
</head>

<body>

	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul>

	<div></div>

</body>

</html>

Sous IE le papillonage est toujours present.
Mis à part ton problème principal, et hormis le fait que l'animation est lourde à charger, j'observe comme un problème sous Firefox-Linux (Gecko, quoi...):
upload/137-peresclinuxf.png
Well ...
C'est prévu ça ? ;-p

@+, HoPHP
euh... ben... déjà j'essaie de faire fonctionner sur IE et FF windows. Je me suis pas encore lancé dans linux.
J'avoue que je pensais naïvement que FF était bien fait et fonctionnais pareil sous linux Smiley sweatdrop
En fait, à prori, c'est la même chose (et je n'explique pas pourquoi c'est différent !)!

<edit>Finalement, j'ai cherché un peu...

Le problème est que tu pars du principe que tout le monde utilise la même police que toi, ce qui n'est pas forcément le cas. Tu bases tes dimensions (style en-ligne: #colonne droite et #colonnegauche ont des dimensions fixées en pixels) sur ton matériel (pixels <-> écran ...) au lieu de les baser sur du logiciel (taille de police <-> logiciel). De plus, la fixation de tailles en pixels empêche un redimensionnement du design adapté au redimensionnement du texte.

Afin de résoudre ton problème (enfin, celui que je t'ai soumis), corrige ça en adpatant tes tailles à l'aide d'"em". Dans ce cas précis, ce qui pose problème, c'est le
#colonnedroite {
	margin : -482px 0 0 50%;
	padding : 0 0 0 10px;
	width : 50%;
	[b]height : 500px;[/b]
}


Voilà...

</edit>
Modifié par HoPHP (18 Jul 2005 - 19:21)
OK. Merci pour cette info, HoPHP. Erreur de débutant, je vais devoir revoir toutes mes tailles ... Smiley sweatdrop

afbilou, j'ai appliqué ta technique sur mon menu : ça marche très bien, même sous IE ! Etonnant, car avec ton script , ça le fait pas. Encore merci.

Bon, tout ça résoud pas mon problème d'affichage aléatoire sous IE
Smiley confus . Je contineu à chercher ...
Modifié par grand-mister (19 Jul 2005 - 15:13)
Bon, j'ai changé mes tailles en "em", pour la page indiquée. Ca marche... jusqu'à un certain point. Si je met une très grosse police ça fini quand même par casser ma mise en page.

Par ailleurs, je me rend compte d'un autre problème de taille, dans les menu. Ils sont calibrés en pixel pour s'aligner sur les anims flash. Du coup, si je grossis la police, le texte dépasse le bouton et n'apparait pas en entier. Et la je vois pas comment arranger sans casser le design (et c'est pas moi le designer Smiley ravi )
Bon, je crois avoir résolu mon problème d'affichage aléatoire, en modifiant ma façon de centrer mes blocs. Je les centrait avec le padding, j'ai finalement utilisé left et margin-left.

Il n'empeche que c'est très bizarre comme bug, de la part d'IE : afficher différement, et aléatoirement, plusieurs blocs freres possédant les mêmes class.

Une situation utopique pour un webmaster : que tous les navigateurs utilisent le même moteur respectueux des standards, validé par le W3C, et que la concurence entre eux ne se fasse plus que par les fonctionnalités autour de ce moteur.
Ca serait le pied, non ? Smiley ravi

Encore merci pour votre aide.
grand-mister a écrit :
Bon, je crois avoir résolu mon problème d'affichage aléatoire, en modifiant ma façon de centrer mes blocs. Je les centrait avec le padding, j'ai finalement utilisé left et margin-left. (...)
C.f. "Modèles de boîte !" En effet, Microsoft et les navigateurs Gecko n'utilisent pas le même modèle de boîte !

@+, HoPHP

<edit>Non, finalement ... </edit>
Modifié par HoPHP (20 Jul 2005 - 08:28)
afbilou a écrit :
Ceci passe sous les navigateurs serieux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
	<title>Gabarit 02</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<style type="text/css">

		* {
			margin:				0;
			padding:			0;
		}

		ul {
			list-style:			none;
			float:				right;
		}

		ul li {
			float:				left;
		}

		ul li a {
			background-color:	pink;
			padding-top:		50px;
			padding-left:		20px;
			padding-right:		20px;
			display:			block;
			text-decoration:	none;
		}

		ul li a:hover {
			border-bottom:		15px solid gray;
			padding-top:		35px;
		}

		div {
			clear:				both;
			height:				300px;
			background-color:	green;
		}

	</style>
</head>

<body>

	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
	</ul>

	<div></div>

</body>

</html>

Sous IE le papillonage est toujours present.



alors as tu reussi a exploiter "ul li a:hover" avec IE. Je doute car IE n'accepte que les liens <a> pour etre hover
Sujet clos
Aller à