Discussion :

[Nixar]

Désolé ce sujet doit prendre une bonne part des posts ici... mais là je ne comprends vraiment pas ce qui se passe.

Mon site est full .NET et tout est généré dynamiquement. J'ai une bonne mise en page sous IE 6 et sous Firefox ca ne va pas.

L'adresse : www.artsgraphics.fr/photos.aspx

Ensuite cliquez sur "voitures/course". Les contrôles affichés ne tiennent pas compte du positionnement demandé ni des images de fond appliqués.

Si vous refaites la même sous IE6 tout fonctionne (comme je le veux du moins).

Voici le code html généré (pour un contrôle vignette+texte):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <input id="m_Content1_ctl12_Img" class="img" type="image" style="border-width: 0px; overflow: visible; height: 100px; width: 100px; clear: none; float: left; background-image: url(http://www.artsgraphics.fr/Photos/Voitures/Course/Grand%20Prix%20de%20France/28112007/Vignettes/ECLIPSE-Tuning-(MA-VOITURE)(1).jpg); background-position: center; background-attachment: fixed; background-repeat: no-repeat;" onclick="OuvrirPage('Photos/Voitures/Course/Grand%20Prix%20de%20France/28112007/index.htm');" src="http://www.artsgraphics.fr/images/transparent.gif" name="m$Content1$ctl12$Img"/>

Pourquoi ce code est-il correctement interprété sous IE 6 et pas sous Firefox?

PS : je configure mon contrôle en c# en passant par les attributs de la propriété style de mon contrôle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
LienVisio LienPhoto = new LienVisio();
            Control Control = LoadControl("LienVisio.ascx");
            LienPhoto = (LienVisio)Control;
            LienPhoto.AccesseurImage.ImageUrl = Commun.AccesseurCheminWeb + "images/transparent.gif";
            LienPhoto.AccesseurImage.Style.Add("background-image", "url('MonURL')");
            LienPhoto.AccesseurImage.Style.Add("background-position", "center center");
            LienPhoto.AccesseurImage.Style.Add("background-attachment", "fixed");
            LienPhoto.AccesseurImage.Style.Add("background-repeat", "no-repeat");

Merci de votre aide...

Nixar

[Nixar]

L'idée à la base est de pouvoir utiliser les possibilités CSS étendues d'affichage d'une image (fixed, no repeat...) pour garder l'image à sa taille d'origine quelle que soit la taille de l'objet qui l'affiche. N'ayant pas réussi à gérer ca avec le ImageButton.ImageUrl (lui il déforme l'image pour remplir complètement le contenant), j'essaye donc avec background-image.

Après pas mal de recherches et de tests, il s'avère que Firefox ne semble pas prendre en compte la propriété "background-image" si aucune image n'est spécifiée dans l'attribut "src".
J'ai essayé (ca marche sous IE comme mentionné plus haut) de lui assigner un gif transparent, et d'utiliser background-image pour afficher l'image voulue. Là toujours rien, l'image affichée est bien transparente, mais il ne tient pas compte du background-image saisi.
Ici un test, ouvrez cette page sous IE 6 et firefox 2 pour voir la différence...

http://www.artsgraphics.fr/test.aspx

Je ne comprends vraiment pas. Quelqu'un a-t-il déja rencontré le problème?

Merci beaucoup pour le temps passé sur ce problème.

Nixar

[Candygirl]

Si tu prends firefox (ou IE 7 d'ailleurs ) et que tu réduis la fenêtre toute petite, tu devrais, je pense, comprendre le problème (c'est donc, bien sûr, Firefox et IE7 qui interprètent correctement les propriétés css que tu as définies).

[Nixar]

Merci beaucoup d'avoir pris le temps d'étudier mon problème. Effectivment je vois bien le souci lorsque je diminue ma fenêtre. Ceci dit ,le CSS n'étant pas vraiment mon fort () je ne comprends pas pourquoi il me centre ce background sur la page principale alors que j'ai attribué le background-image à mon image qui elle fait 100X100...

Ou est mon souci?

Merci d'avance pour ta réponse.

Nixar

[Candygirl]

Ton problème provient de ton
background-attachment: fixed;
cette proprlté fait référence à la zone de visualisation, soit la fenêtre et non l'élément comme c'est le cas par erreur sur IE6.

[Nixar]

Merci beaucoup ! c'était effectivement ca.
Bon à savoir pour la prochaine fois...

merci.