Souci lien sous firefox

Souci lien sous firefox - HTML/CSS - Programmation

Marsh Posté le 18-02-2011 à 11:20:09    

Bonjour,
 
j'bosse sur une newsletter avec css intégré dans le fichier html.
Il y'a 6 box, et chacunes de ces box sont des liens.
 
Les 6 box sont des copiés/collés, mais il y'a une des box qui refusent de se mettre en lien entièrement, le lien n'est que sur le texte contenu dans la box.
Et cela ne fonctionne pas seulement sous firefox, c'est correct sous chrome, safari, et iexplorer (le comble!!).
 
J'ai passé le CSS au validateur W3C, et aucune erreur est trouvée! HELP!!! Siouplééééé!!!

Reply

Marsh Posté le 18-02-2011 à 11:20:09   

Reply

Marsh Posté le 18-02-2011 à 11:35:03    

On peut avoir du code ou on doit deviner?

Reply

Marsh Posté le 18-02-2011 à 11:39:02    

Vas-y, je te laisse deviner Irma!  
 
<style type="text/css">
* {margin: 0; padding: 0;}
a:hover {text-decoration: underline;}
strong {font-weight: bold;}
</style>
 
Le souci, c'est surtout que j'ai mis en forme du texte dans une balise <a href> pour que l'ensemble de la box soit un lien, ça marche sur toutes les box, exceptée une:
 
<div style="width:225px; height:137px; margin: 0; background: url(http://www.toutçatoutça.jpg) no-repeat;"><a style="text-decoration:none; color:black;" href="http://etencoretoutça.html" title="HelpMe"><p style="height:45px; padding: 5px;"><img style="float: left; margin-right: 5px;" src="http://www.encoreun.jpg" alt="HelpMe" /><span style="font-size:13px; font-weight:bold; text-align:left;">HelpMee<br />Please</span></p><p style="text-align: center; font-weight:bold;"><span style="font-size:35px; color:#d00000;">tout pleins des &euro;</span><br /><span style="display: block; margin-top: 10px; font-size:12px;">Je vous en prie, de l'aiiiide!</span></p>

Reply

Marsh Posté le 18-02-2011 à 11:42:12    

ta balise a ne se ferme pas, et c'est ptêtre paas la seule. Alors oui c'est du html valide mais c'est MAL. Ferme ta balise et réessaye.

Reply

Marsh Posté le 18-02-2011 à 11:43:25    

Ah non, j'ai juste pas copié/collé jusqu'au bout, mais la balise <a> est bien fermée tout de suite après le </p>... (Woops!)

Reply

Marsh Posté le 18-02-2011 à 11:47:04    

eurizooz a écrit :

Ah non, j'ai juste pas copié/collé jusqu'au bout, mais la balise <a> est bien fermée tout de suite après le </p>... (Woops!)


 
La comme ça j'ai aucune idée, c'est dur sans un exemple qui marche pas.
Je reposte le code indenté:
 

Code :
  1. <div style="width:225px; height:137px; margin: 0; background: url(http://www.tout&#195;&#167;atout&#195;&#167;a.jpg) no-repeat;">
  2.   <a style="text-decoration:none; color:black;"
  3.   href="http://etencoretout&#195;&#167;a.html" title="HelpMe">
  4.     <p style="height:45px; padding: 5px;">
  5.       <img style="float: left; margin-right: 5px;"
  6.       src="http://www.encoreun.jpg" alt="HelpMe" />
  7.       <span style="font-size:13px; font-weight:bold; text-align:left;">
  8.       HelpMee
  9.       <br />Please</span>
  10.     </p>
  11.     <p style="text-align: center; font-weight:bold;">
  12.       <span style="font-size:35px; color:#d00000;">tout pleins des
  13.       &#8364;</span>
  14.       <br />
  15.       <span style="display: block; margin-top: 10px; font-size:12px;">
  16.       Je vous en prie, de l'aiiiide!</span>
  17.     </p>
  18.   </a>
  19. </div>

Reply

Marsh Posté le 18-02-2011 à 11:50:04    

Le problème, c'est que je ne peux pas vous montrer pour le moment! Mon entreprise créé cette newsletter pour un client, et pour le moment, j'ai pas le droit! x_x Je sais bien que ce serait plus simple avec un exemple :-/ Si je pouvais, je l'aurais fait, ça m'aurait facilité la vie à moi aussi!

Reply

Marsh Posté le 18-02-2011 à 14:57:34    

Tu ne peux pas mettre des <p> dans des <a>
Ce n'est pas normal que la validateur ne trouve aucune erreur

Reply

Marsh Posté le 21-02-2011 à 11:12:12    

C'est clair, j'allais justement le faire remarquer :/ Et puis tous ces styles dans le html au lieu du css, c'est pas propre...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 21-02-2011 à 17:28:37    

rufo a écrit :

C'est clair, j'allais justement le faire remarquer :/ Et puis tous ces styles dans le html au lieu du css, c'est pas propre...


 
C'est une newsletter... Je suis donc un peu forcée de mettre le css dans le html non? Oo
Après, les <p> dans les <a>, on me demande à ce que toute la box soit cliquable, et pas seulement le texte à l'intérieur! Et j'avoue ne pas voir d'autre solution... Donc je suis à votre écoute.

Reply

Marsh Posté le 21-02-2011 à 17:28:37   

Reply

Marsh Posté le 21-02-2011 à 17:39:43    

eurizooz a écrit :


 
C'est une newsletter... Je suis donc un peu forcée de mettre le css dans le html non? Oo
Après, les <p> dans les <a>, on me demande à ce que toute la box soit cliquable, et pas seulement le texte à l'intérieur! Et j'avoue ne pas voir d'autre solution... Donc je suis à votre écoute.


 
1. Tu peux déclarer une partie <style></style> ou tu mets tout ton css.
2. Tu peux mettre l'action désirée sur le onClick de l'élément de plus haut niveau, avec un :hover{text-decoration: ...} pour émuler le sous-ligné des liens.

Reply

Marsh Posté le 21-02-2011 à 17:44:58    

C'est une newsletter, tout ce que tu proposes est faux, il faut que cela fonctionne sous Word. En effet, c'est le moteur html de Outlook.
Sinon, eurizooz, tu retires les <p>, pour une newsletter, on s'en contrefiche

Reply

Marsh Posté le 21-02-2011 à 17:49:29    

David Boring a écrit :

C'est une newsletter, tout ce que tu proposes est faux, il faut que cela fonctionne sous Word. En effet, c'est le moteur html de Outlook.
Sinon, eurizooz, tu retires les <p>, pour une newsletter, on s'en contrefiche


pas compris le rapport entre une newletter et Word :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 21-02-2011 à 17:50:46    

eurizooz a écrit :


 
C'est une newsletter... Je suis donc un peu forcée de mettre le css dans le html non? Oo
Après, les <p> dans les <a>, on me demande à ce que toute la box soit cliquable, et pas seulement le texte à l'intérieur! Et j'avoue ne pas voir d'autre solution... Donc je suis à votre écoute.


 
Comme proposé, mettre le css dans <style>...</style> ou faire appel, depuis la newsletter, à un fichier css situé sur le serveur où est hébergée l'appli ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 21-02-2011 à 18:03:59    

rufo a écrit :


pas compris le rapport entre une newletter et Word :/


C'est expliqué après pourtant.
Dans la suite Office, il y a une application pour lire les mails. En entreprise, c'est sans doute le logiciel le plus utilisé et il se nomme Outlook.  
Cette application permet de lire les newsletters.
Ces newsletters sont en html, et donc il faut un moteur pour le comprendre. Dans ce cas, c'est celui d'une autre application livré avec la suite office qui est employé : Word  
http://msdn.microsoft.com/en-us/li [...] e.12).aspx

Reply

Marsh Posté le 21-02-2011 à 18:07:23    

David Boring a écrit :

C'est une newsletter, tout ce que tu proposes est faux, il faut que cela fonctionne sous Word. En effet, c'est le moteur html de Outlook.
Sinon, eurizooz, tu retires les <p>, pour une newsletter, on s'en contrefiche

 

@Rufo: outlook utilisait jusqu'a il y a peu le moteur de rendu html de word, différent de celui d'IE.

 

edit: grillé.

 

@david Boring: Je me rappelais pas que le moteur de word était aussi pourri... Merci pour le lien.

Message cité 1 fois
Message édité par gelatine_velue le 21-02-2011 à 18:10:08
Reply

Marsh Posté le 21-02-2011 à 18:08:11    

rufo a écrit :


 
Comme proposé, mettre le css dans <style>...</style> ou faire appel, depuis la newsletter, à un fichier css situé sur le serveur où est hébergée l'appli ;)


De cette façon, personne sous Gmail et Lotus n'a de style, pas top comme idée.
http://www.campaignmonitor.com/css/
 
Faire des newsletter n'est vraiment pas si facile  :jap:

Reply

Marsh Posté le 21-02-2011 à 18:08:55    

gelatine_velue a écrit :


 
@Rufo: outlook utilisait jusqu'a il y a peu le moteur de rendu html de word, différent de celui d'IE.
 
edit: grillé.


Ben non, plus que jamais  
http://www.windowsitpro.com/articl [...] ngine.aspx

Reply

Marsh Posté le 21-02-2011 à 18:11:12    


 
Il était question de changer, je pensais qu'ils l'avaient fait. Au temps pour moi.

Reply

Marsh Posté le 22-02-2011 à 10:55:55    

David Boring a écrit :


De cette façon, personne sous Gmail et Lotus n'a de style, pas top comme idée.
http://www.campaignmonitor.com/css/
 
Faire des newsletter n'est vraiment pas si facile  :jap:


 
Sous Gmail, je sais, mais pour avoir écrit une appli Intranet (Astres, cf ma signature), je peux te dire que le coup des <style>...</style> marche très bien sous Lotus Notes (en tout cas, la v5.? et la v6.5).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-02-2011 à 10:58:09    

David Boring a écrit :


C'est expliqué après pourtant.
Dans la suite Office, il y a une application pour lire les mails. En entreprise, c'est sans doute le logiciel le plus utilisé et il se nomme Outlook.  
Cette application permet de lire les newsletters.
Ces newsletters sont en html, et donc il faut un moteur pour le comprendre. Dans ce cas, c'est celui d'une autre application livré avec la suite office qui est employé : Word  
http://msdn.microsoft.com/en-us/li [...] e.12).aspx


 
Merci pour la précision. Je connais bien entendu Outlook et Word mais je croyais qu'ils utilisaient le moteur de rendu HTML d'IE. Donc, non content d'avoir développé un moteur de rendu moisi, ils en ont fait 2! :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-02-2011 à 14:20:37    

J'ai retiré tous les <p> et j'ai mis des <span> à la place...
Maintenant, faut que je trouve un moyen d'agir sur mes <span>.
 
David Boring, t'es bien le seul à avoir compris mon problème. J'avais peur de ne pas m'être bien expliquée.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed