Déplacement de bloc au survol de la souris

[Monique]

Bonjour,

J'ai deux problèmes avec cette page test (à partir du CMS Itseasy)

Le premier ne se produit qu'avec Firefox, pas avec Opera ni IE :

le bloc du menu est décalé vers le bas au survol du 1er item du menu, et seulement celui-là, le problème se reproduit après chaque rafraîchissement de la page.

Extrait du code

/* bloc gauche */

.gauche {
	float: left;
	width: 20%;
	background-color: transparent;
}
.block_sommaire_gauche {
	margin: 2em 0 0 0;
}
.block_sommaire_gauche p {
	margin: 0;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	border-top: 1px dotted #000080;
	color: #000080;
	background-color: transparent;
	font-weight: bold;
	text-indent: 0.5em;
}
.block_sommaire_gauche ul {
	margin: 0;
	padding: 0;
	background-color: transparent;
	text-indent: 1em;
}
.block_sommaire_gauche li {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	border-top: 1px dotted #000080;
	list-style-position: inside;
	list-style-type: none;
	background-color: transparent;
}
.block_sommaire_gauche li li {
	margin: 0 0.8em;
	padding: 0.3em 0.3em 0.8em;
	border-top: 0;
	list-style-position: inside;
	list-style-type: none;
	background-color: transparent;
	text-indent: 0.3em;
}
.block_sommaire_gauche li li:before {
	content: ">> ";
}
.block_sommaire_gauche a:link, .block_sommaire_gauche a:visited {
	border: 0;
	text-decoration: none;
}
.block_sommaire_gauche li a:link, .block_sommaire_gauche li a:visited {
	color: #000080;
	font-weight: bold;
	text-decoration: none;
}
.block_sommaire_gauche a:hover {
	border-right: 3px solid #E0611C;
	padding-right: 3px;
	color: #E0611C;
}

<div class="gauche">

<div class="block_sommaire_gauche">
<p class="txt-centre">It's not just an attitude...<br />It's a way of life !</p>
</div>

<div class="block_sommaire_gauche">

<ul>
	<li><a href="./index.php">Accueil</a></li>
	<li><a href="./historique.php">Historique</a>
		<ul><li><a href="./historique-flyers.php">Flyers</a></li></ul></li>
	<li><a href="./equipe.php">Equipe</a></li>
	<li><a href="./contact.php">Dj's</a></li>
	<li><a href="./contact.php">Agenda</a>
		<ul><li><a href="./agenda_linephase.php">LinePhase</a></li>
		<li><a href="./contact.php">Divers</a></li></ul></li>
	<li><a href="./contact.php">Photos</a></li>
	<li><a href="./contact.php">Dj Set</a></li>
	<li><a href="./contact.php">Liens</a></li>
	<li><a href="./contact.php">Livre d'or</a></li>
	<li><a href="./contact.php">Contact</a></li>
</ul>
</div>

<div class="block_sommaire_gauche">
<ul><li><a href="./contact.php">Plan du site</a></li>
		<li><a href="./index.php">Infos site</a></li>
		<li><a href="./contact.php">Mentions légales</a></li>
		<li><a href="./index.php">Liens partenaires</a></li>
</ul>
</div>

</div>

Pourquoi ?

Je ne trouve ni la cause, ni le remède

Le deuxième problème est absolument ridicule

J'ai voulu mettre un peu d'ordre dans la feuille de style avant de vous soumettre le problème, je n'ai (apparemment ) fait que déplacer ou simplifier quelques règles, je n'ai rien changé au code HTML qui est valide de même que la CSS... et le bloc droit a filé en-dessous du bloc central

La cause devrait certainement me sauter aux yeux mais cela fait des heures que je cherche sans succés

Merci de votre aide

[Monique]

Bonjour,

J'ai résolu le 2ème problème en remettant la feuille de style non optimisée

Mais le 1er est toujours d'actualité, et beaucoup plus important pour moi... et l'image de Firefox

[Commmint]

C'est normal que le texte de ta page soit illisible (trop petit) ?

[jabda]

Bonjour Monique,

Utilisateur de Firefox, je confirme le petit tour de magie que tu nous réalise.

C'est étonnant, étant un gros newbie, je ne pourrai malheureusement pas t'aider, en revanche cela mérite une attention particuliere afin de faire un "effet" au seuls utilisateurs de Firefox...reste a trouver d'ou cela provient !

P.S : pourquoie melange tu les em et les px dans ton code ?

Bonne chance

Jabda

[Monique]

C'est normal que le texte de ta page soit illisible (trop petit) ? 

<{POST_SNAPBACK}>

Tu utilises un Mac, je crois, Commmint ?

La feuille de style de départ est celle du CMS utilisé et je n'avais pas encore analysé l'impact des tailles de police

Je viens de modifier ceci (c'est le choix par Openweb) :

font-family:"Trebuchet MS", verdana, sans-serif;
font-size: small;  /* 0.75em */

est-ce mieux ?

Si non, je profite de l'occasion... constates-tu d'autres anomalies avec ton Mac ?

Le problème de décalage évoqué se produit-il aussi ?

[Commmint]

Je suis pas sur mac monique, juste un bon PC winXP, mais je te rassure, tout est revenu dans l'ordre côté police. Je constate en revanche les meme problèmes que toi sur Firefox

je cherche encore avec mes modestes compétences...

Modifié 11 Février 2005 par Commmint

[Monique]

Bonjour jabda,

Et bienvenue sur le Hub

cela mérite une attention particuliere afin de faire un "effet" au seuls utilisateurs de Firefox...reste a trouver d'ou cela provient !

<{POST_SNAPBACK}>

oui... d'autant plus que j'ai l'intention d'ajouter une petite page expliquant que l'affichage est plus beau avec un navigateur respectueux des standards

P.S : pourquoie melange tu les em et les px dans ton code ?

Tu as raison de soulever ce point, je vais étudier cela

[Commmint]

Je viens de tester ton code dans DW et les symptomes ont disparu sur firefox...

Me vient une remarque: Le volume de tes CSS me parait démesuré pour l'effet final, à moins qu'il y ait quelque chose en plus par la suite ?

Pourquoi ne pas gérer l'effet de rollover avec une image de fond GIF alignée sur la droite du lien (et un petit padding en plus) et le texte par dessus ?

Modifié 11 Février 2005 par Commmint

[Monique]

Xethorn a décelé l'origine du problème, c'est déjà une piste

Reste à trouver pourquoi Firefox a ce comportement...

En supprimant les bordures, plus de bug :

.block_sommaire_gauche a:hover {
color:#E0611C;
 /*border-right: 3px solid #E0611C;
 padding-right: 3px;*/
}

Je voudrais quand même l'effet de barre verticale au survol du lien...

[Sarc]

Bonjour Monique,

effectivement, en enlevant la bordure on enlève le problème, mais j'ai voulu chercher plus loin, et à mon avis, c'est le text-indent: 0.5em; de .block_sommaire_gauche ul qui pose problème... En l'enlevant purement et simplement, il n'y a pas de problème du tout... Tu pourrais essayer de le positionner avec un margin-left, tout simplement non ?

Je pense que ça marcherait mieux...

Sarc

[Monique]

Bonjour,

Tu es mon sauveur sarc

J'ai supprimé le text-indent de .block_sommaire_gauche ul et j'ai mis

.block_sommaire_gauche li {
	list-style-position: inside;
	list-style-type: none;
	margin: 0 0 0 1em;
	padding: 0.3em 0 0.3em 0;
	border-top:1px dotted #000080;
}

Je n'ai toujours pas compris pourquoi seul Firefox réagissait ainsi...

le mystère subsistera

[Sarc]

De rien Monique, ça m'a fait plaisir de me pencher sur ton code pour te trouver ton chtit problème... Je demandais pas autant de coeurs en retour

Moi non plus j'avoue ne pas comprendre ce décalage... :/

[Monique]

Bonjour,

Me vient une remarque: Le volume de tes CSS me parait démesuré pour l'effet final, à moins qu'il y ait quelque chose en plus par la suite ?

<{POST_SNAPBACK}>

Effectivement, la feuille de style comprend aussi des règles destinées à la partie administration. J'avais cependant commencé à la réorganiser à ma manière et à supprimer les règles inutiles... une mauvaise manipulation a provoqué le second problème évoqué (position du bloc de droite ). J'ai donc repris la feuille de style d'origine pour poser ma question.

Pourquoi ne pas gérer l'effet de rollover avec une image de fond GIF alignée sur la droite du lien (et un petit padding en plus) et le texte par dessus ?

Cela aurait été la solution adoptée en dernier recours... face à quelque chose qui me résiste ainsi, je suis plutôt obstinée

Le problème est résolu et ma feuille de style se nettoie petit à petit, merci à tous