[Résolu] display: inline; sous Opera

Bonjour à tous !

Quelqu'un peut-il me dire ce qui cloche avec Opera 7 (Mac et Win) ?
Le menu en display: inline; s'obstine verticalement

/* url supprimée par Stephan */ (copier l'url et enlever l'espace)

Le CSS :

@media screen, projection {

#nav {
	background: #fcfbf5;
	position: absolute;
	right: 18px;
	bottom: 0;
	border-top: 4px solid #004990;
	border-right: 1px solid #004990;
	border-left: 1px solid #004990;
	margin: 0;
}

#nav li {
	display: inline;
	list-style-type: none;
}

#nav a:link, #nav a:visited {
	color: #004990;
	float: left;
	padding: 6px 9px;
	text-decoration: none;
}

#nav a:link.active, #nav a:visited.active {
	color: #004990;
	background: url(images/bluetab.gif) no-repeat top center;
}
	
#nav a:hover {
	color: #fdb813;
	background: url(images/yellowtab.gif) no-repeat top center;
}

}

Et puis il y a un effet amusant sur le logo au survol (mais sans conséquences)

Par ailleurs, j'utilise @media pour masquer CSS à IE/Mac.

@media screen, projection {}

et je rappelle avec le commentaire conditionnel

<!--[if IE 6]><style type="text/css">@import url("style.css");</style><![endif]-->

Curieusement, le a:hover passe les barricades

Pourquoi ?

Merci par avance
Modifié par Stephan (17 Jul 2005 - 06:03)

Ton #nav n'a pas de largeur définie, donc il n'occupe que la place minimale en position absolute. Essaye en lui donnant une largeur.

Merci Raphael !

Par essais/erreur, j'ai trouvé que width: 26.5em était la valeur idéale dans mon cas.
Reste à voir ce que ça donne à l'usage

#nav {
	position: absolute;
	background: #fcfbf5;
	right: 18px;
	bottom: 0;
	[b]width: 26.5em;[/b]
	border-top: 4px solid #004990;
	border-right: 1px solid #004990;
	border-left: 1px solid #004990;
	margin: 0;
}

Je vais mettre un [Résolu]

Quelqu'un a une idée comment a:hover arrive à se faufiler à travers les barricades ?
Sinon, ce n'est pas trop gênant.
J'essais juste de comprendre

Paf. Raphaël a tout dit.

Comme je suis tatillon, je précise que sur ce point où CSS2.0 prétait à des interprétations divergentes, Opera avait fait un choix différent de celui d'IE et de Gecko.

Lors du passage à sa version 8.0, Opera s'est rallié à l'avis de la majorité, et n'a plus besoin qu'on lui spécifie cette largeur.

(tout comme FireFox a adopté récemment la position d'Opera sur le problème des IDN phising en se ralliant à la solution d'une liste blanche de TLD "sûrs" : comme quoi, le bon sens prévaut de part et d'autre malgré la concurrence, pour le plus grand bonheur des utilisateurs et des webmestres )

<edit>
Pour le :hover, c'était il me semble un effet de bande du calcul des largeur qui relevait plus du bug qu'autre chose.
</>
Modifié par Laurent Denis (15 Jul 2005 - 19:57)

Laurent Denis a écrit :

<edit>
Pour le :hover, c'était il me semble un effet de bande du calcul des largeur qui relevait plus du bug qu'autre chose.
</>

Gné ???

Stephan a écrit :

Gné ???

La seule chose dont je me souviens avec précision, c'est d'avoir fait Gné ??? aussi quand ça m'est arrivé

Sinon, le fait d'être en :over modifiait le calcul de la largeur nécessaire au contenu flottant, d'où expansion du conteneur qui s'adaptait au contenu. Le pourquoi du comment m'échappe, là

Mais... Tiens, en fait : sauf erreur, sans le flottant en question, tu n'aurais pas de problème avec Opera 7. Il sert vraiment à quelque-chose, ce flottant ? Parce que le li étant déjà en in-line...

Ah, oui. tes liens ont besoin de prendre un comportement de bloc, c'est ça ? Pour le background ?

Auquel cas, un display:block suivi d'un display:inline-block pourrait faire l'affaire sans compromettre le bidule dans Firefox, il me semble.

Non ?

Je n'ai plus d'Opera 7, ayant récemment changé de machine. Mais c'est à vérifier. Ta CSS doit pouvoir se simplifier, AMHA. Enfin, simplifier, façon de parler
Modifié par Laurent Denis (15 Jul 2005 - 20:28)

Bon. J'ai fait différents tests avec les pistes que tu m'as données et au mieux c'est Firefox qui s'approprie le problème. De toute façon, ça m'étonnerait que ce menu demeure tel quel, mais je voulais uniformiser...

... et comprendre

En ce qui concerne le a:hover, je n'ai pas dû être assez précis. J'ai mis en place un filtre pour masquer le CSS à IE/Mac (les versions 5 de IE en fait). Tout fonctionne bien, IE/Mac ne charge pas le CSS à cette exception près, les a:hover {color: #fdb813;} passent à travers le filtre. Le résultat est une page dénudée, avec un lien jaune au survol .

Pour observer le phénomène, il faut IE/Mac

En tout cas merci !

<MAJ />

Finalement, j'ai dû augmenter la largeur à 28em pour que ça passe sous Mac

#nav {
	position: absolute;
	background: #fcfbf5;
	right: 18px;
	bottom: 0;
	[b]width: 28em;[/b]
	border-top: 4px solid #004990;
	border-right: 1px solid #004990;
	border-left: 1px solid #004990;
	margin: 0;
}

Puis sous Opera/Mac, le menu s'obstine toujours en position verticale.

Vais pas me prendre la tête longtemps moi...