[Résolu] Problème de bordure qui n'apparait pas intégralement

Salut

Tes balise <img> ne sont pas fermées

A+

Merci, j'oublie toujours de fermer cette <#£*%> de balise... Mais bon ca résoud pas mon problème. :'(

Essai ca

a.image:link img {
	border: 2px solid #7C8EF8;
}
a.image:visited img{
	border: 2px solid #7C8EF8;
}
a.image:hover img {
	border: 2px solid #FDCA00;
}
a.image:active img{
	border: 2px solid #FDCA00;
}

A+

Merci, ca marche très bien sur firefox, mais sur IE il n'ya pas l'effet de survol... Si tu as une idée pour résoudre la fin du problème ca serait gentil.

Petit travail de recherche

OK sous IE 6, FF 1.5win et Opera 8.5win

a.image {
	margin: 5px
}

a.image img {
	border: 2px solid;
[#red]/* Apparemment IE le gère comme a.image sûrement du a une fusion des marges ?? */[/#]
}

a.image:link, a.image:link img {
	border-color: #7C8EF8;
}

a.image:visited, a.image:visited img{
	border-color: #7C8EF8;
}

a.image:hover, a.image:hover img {
	border-color: #FDCA00;
}

a.image:active,a.image:active img{
	border-color: #FDCA00;
}

A+

Bonjour,

J'ai modifié la CSS, le margin est réglé à 0 pour tous les liens, et je n'en ai pas respécifié pour a.image
Je ne pense pas que cela vienne de la le fait que le lien n'affiche pas l'état survolé sur IE alors qu'il l'est sur FF.

Merci d'avance de votre aide ! C'est un détail mais je veux le résoudre.

Je remet le lien pour ceux qui prennent en cours : http://mikachudesign.free.fr/sitetest/test.php
Modifié par Mikachu (11 May 2006 - 11:08)

Le problème est que les navigateurs englobent mal les images dans le contenu des liens si il n’e sont pas en bloc
Et que IE gère mal les hover sur ce qui n’est pas strictement un lien

Donc en metant

a.image img {
	border: 2px solid;
}

Je définis une bordure à l’image valide sous tous les navigateurs

Si ont met

a.image:link img {
	border-color: #7C8EF8;
}
a.image:visited img{
	border-color: #7C8EF8;
}
a.image:hover img {
	border-color: #FDCA00;
}
a.image:active img {
	border-color: #FDCA00;
}

Ont active les pseudo class naturellement dans les navigateur qui les gèrent correctement, mais pas dans IE.
Pour lui il faut rajouter

a.image:link {
	border-color: #7C8EF8;
}
a.image:visited {
	border-color: #7C8EF8;
}
a.image:hover {
	border-color: #FDCA00;
}
a.image:active {
	border-color: #FDCA00;
}

Le cumul des deux devient

a.image:link, a.image:link img {
	border-color: #7C8EF8;
}
a.image:visited, a.image:visited img{
	border-color: #7C8EF8;
}
a.image:hover, a.image:hover img {
	border-color: #FDCA00;
}
a.image:active,a.image:active img{
	border-color: #FDCA00;
}

Si j’ai mis une marge dans a.image

a.image {
	margin: 5px
}

C’est pour les séparer car il rentre dans une gestion purement inline et sont collés l’un a l’autre

A+
Modifié par gege71 (11 May 2006 - 14:31)

Bonsoir,

Bon j'ai testé, ca marchait vaguement sur IE, mais ca m'a créé des bugs sur firefox (cadre qui faisait pas le tour de l'image).

Je suis toujours en quète de solution. La version en ligne fonctionne pour FF, mais l'effet de survol des boutons home et mail en haut à gauche ne fonctionne toujours pas sur IE

Merci d'avance au génie qui me trouvera une solution qui fonctionne sur les deux. (J'en suis même pas à parler des autres navigateurs :S)

Nouvelle essai

Résultas ici http://test.hysatech.com/test4.html

Testé sous sans erreur ( chez moi ) sous
IE 5
IE 6
IE 7
FF 1.5 Win
FF 1.0.8 Linux
Opera 8.5 Win

Mais si ça ne te convient pas, ça pourra servir à d’autres personnes

A+

PS : Si quelqu'un pouvais teste sous MAC, Merci de me tenir informer du résultas


EDIT : Par contre tu as un mauvais affichage de ton menu dans IE 7 et FF 1.0.8 Linux
Modifié par gege71 (12 May 2006 - 01:19)

Merci bien encore, je constate que ca marche sur la version hébergée chez toi. Je viens de copier coller la fin du code CSS, soit ce qui suit :

a.image {
	margin: 5px
}
a.image img {
	border: 2px solid;
/* Apparemment IE le gère comme a.image sûrement du a une fusion des marges ?? */
}
a.image:link, a.image:link img {
	border-color: #7C8EF8;
}
a.image:visited, a.image:visited img{
	border-color: #7C8EF8;
}
a.image:hover, a.image:hover img {
	border-color: #FDCA00;
}
a.image:active,a.image:active img{
	border-color: #FDCA00;
}

mais cela n'a rien changé. Le site hébergé chez moi n'affichait pas le survol. Je n'ai pas trouvé ce que tu as modifié d'autre dans la CSS, merci de me le dire, pour info (ou si c'est pas le cas, vive la magie du codage qui marche chez les autres et pas chez moi).

Concernant les bugs de menus, dans IE7 et FF1.0.8 linux, merci de m'envoyer une capture d'écran si tu peux, que je jette un coup d'oeil

Merci encore pour tout !

Salut

Rien sauf (ce qui na pas d'influence)

#quicknav {
  left: 586px; /* a la place de 606px  du aux marge des lien*/
  ....
  ....
}

Et le chemin des images pour le test

Je viens d'aller voir ta page et ça marche bien, sauf que les background ont disparut ( tu a reprit les CSS de ma page et les chemins ne correspondent plus)

Image = vue avec IE 7 ( FF 1.0 linux résultat identiques )



A+

Salut,

J'ai corrigé les liens. Ca marchait pourtant parce que les fichiers étaient encore à l'url chez toi au moment ou j'ai testé. Erreur de débutant de pas avoir pensé à redirectionner les liens, j'assume ><

Mmmh pour IE 7 et FF1.0 linux, effectivement c'est pas beau. Faut que je me mette IE7 déja pour corriger sur celui la. J'imagine que ca fonctionnera aussi sur FF1.0 linux si l'affichage est identique.. à suivre donc.

Ceci dit si tu n'as modifié que la taille de la #quicknav, je comprends pas pourquoi ca marchait hébergé chez toi et pas chez moi... enfin j'ai fait le test maintenant ca marche chez moi aussi

Merci encore pour ton aide précieuse !

Edit : pr contre je viens de découvrir qu'il y'avait une barre de défilement horizontale énorme dans firefox, je ne sais pas quand elle est apparue, mais j'aimerai bien la virer. Seulement je ne trouve pas d'ou elle provient.

Merci par avance.
Modifié par Mikachu (12 May 2006 - 12:39)

Met dans ton CSS

#quicknav {
width: 160px; /* A la place de 760px*/
....
....
}

ça résout l’affichage sous IE 7 et FF Linux

A+

PS : Un petit [ Resolu] dans le titre pour clore

EDIT :

Mikachu a écrit :

Ceci dit si tu n'as modifié que la taille de la #quicknav, je comprends pas pourquoi ca marchait hébergé chez toi et pas chez moi... enfin j'ai fait le test maintenant ca marche chez moi aussi

Peut être un problème de cache (déjà vu avec le php chez Free)
Modifié par gege71 (12 May 2006 - 12:59)

Ton edit et mon post se sont croisé

Mikachu a écrit :

Edit : pr contre je viens de découvrir qu'il y'avait une barre de défilement horizontale énorme dans firefox, je ne sais pas quand elle est apparue, mais j'aimerai bien la virer. Seulement je ne trouve pas d'ou elle provient.

Resolu avec le widht

A+

Ouaaaow ^^

Quelle efficacité ! Merci en tout cas pour tout le temps passé à résoudre mon problème. Oui quand je regarde, il est logique en plus. Ma quicknav faisait 760px car je voulais la mettre en absolute au cas ou je rajoute des menus, en alignant les icones par rapport à la droite du div, et finalement j'ai vu que je pouvais l'utiliser autrement. Seulement je n'avais pas corrigé cette taille !

Merci encore.