css για link μέσα σε <div>

[apos]

Καλησπέρα

φτιάχνω ένα HTML newsletter, το οποίο έχω καταφέρει να "φαίνεται" ακριβώς όπως θέλω. Αντιμετωπίζω ένα πρόβλημα όμως, το οποίο προκύπτει μόνο σε GMail webmail λογαριασμούς. Προσπαθώντας να λύσω το πρόβλημα (το οποίο θα περιγράψω παρακάτω), προέκυψε η απορία του thread αυτού.

 

Το πρόβλημα με το GMail

Έφτιαξα σε WYSIWYG editor το newsletter, και όποια "σχετικά" paths (images, css κτλ) τα έκανα απόλυτα ώστε να φαίνονται χωρίς πρόβλημα.

Σε όλα τα περιβάλλοντα ΠΛΗΝ του GMail, όλα φαίνονται 100% όπως θα έπρεπε. Στο GMail όμως προκύπτει το εξής: Δεν κάνει render τα css αρχεία που κάνω include, και τα γράμματα - links κτλ δεν φαίνονται σωστά.

Με λίγο Google, διάβασα "GMail strips CSS of HTML email" και ότι για να φαίνεται σωστά και εκεί, πρέπει τα attributes να "μπουν" μέσα στα divs που περιέχουν το κείμενο (πχ <div style=”font-size:8pt;padding:2px;margin:2px;”>κείμενο</div>).

Έκανα ένα δοκιμαστικό div και πράγματι, όλα είναι μια χαρά ΚΑΙ στο GMail.

 

Το πρόβλημά μου πλέον είναι το εξής:

Δεν μπορώ να βρω πως με attributes inline σε ένα div (όπως στο παράδειγμα παραπάνω) θα χειριστώ την εμφάνιση ενός link. Δοκίμασα 2 τρόπους (δεν κατέχω css, οπότε συγχωρέστε μου αν γράψω οφθαλμοφανή λάθη):

 

- Έβαλα μέσα στα attributes του div επιπλέον ιδιότητες για το link (a):

<div style="font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-variant:normal;color:#dd127b;text-decoration:none;font-style:normal;line-height:normal; a:link{color:#ffffff;text-decoration:underline}; a:visited{color:#ffffff;text-decoration:underline}; a:hover{color:#ffffff;text-decoration:underline};a:active{color:#ffffff;text-decoration:underline};">κείμενο κείμενο κείμενο κείμενο <a href="link" mpla mpla>link text</a> κείμενο κείμενο κείμενο κείμενο </div>

Ό,τι θα έγραφα σε ένα "αυτόνομο" css file δηλαδή.

 

- "Έσπασα" τα divs ώστε το link να περιέχεται σε "δικό του" div (για την ακρίβεια, σε αυτή την περίπτωση χρησιμοποίησα span για να αποφύγω το line break):

<span style="font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-variant:normal;color:#dd127b;text-decoration:none;font-style:normal;line-height:normal;">κείμενο</span><span style="font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-variant:normal;color:#ffffff;text-decoration:underline;font-style:normal;line-height:normal;"><a href="link" mpla mpla>link text</a></span>

 

Και στις δύο περιπτώσεις το αποτέλεσμα είναι το κλασικό μπλε link, που μου δείχνει ότι δεν "διαβάζει" τα attributes....

 

Καμια ιδέα; Ευχαριστώ!!

[macabre_sunsets]

Δοκίμασε το ακόλουθο:

 

<a style="font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;font-variant:normal;color:#dd127b;text-decoration:none; font-style:normal;line-height:normal;"

href="link">κείμενο</a>

 

Μπορείς να δεις το output εδώ.

[apos]

Καλέ μου άνθρωπε! )))

Με το που είδα την απάντησή σου κατάλαβα ότι ήταν η σωστή! ΠΟΛΥ "λίγο" εκ μέρους μου που δεν το σκέφτηκα από την αρχή!

 

Σ' ευχαριστώ πολύ!