SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning text inside a div ... any help ?

    Hi guys

    I was trying to develop my first newsletter. Here it is now (development stage) -> http://www.kigoobe.com/blouvac/blouvac.html.

    If you scroll down till the end, u will understand where is my problem. There are three divs there, arranged horizontally in three td cells, with the last one being an input type = text. And as you can see, the text alignments are not same for the first two text links and the last form content.

    Any help guys? I'm quite a novice in css.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could set the line-height to the same as he height in each of those three divs.

    Code:
    line-height:22px;
    However you should not be using inline styles like that as it is very bad practice. All styles should be in an external stylesheet and applied by means of classes or id's (or directly to the tag).

    You also have some errors in the page so you may want to validate that page also

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks man. It's working. Regarding the external style sheet and css, I read in some sitepoint forums that I need to have all the styles embedded in the body, as I've done, to design a newsletter.

    What do u think ?

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Sheffield, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the newsletter is hosted in a fixed location, then, external stylesheets are the best thing to do, as you can then rearrange the newsletter easily.

    If however, the content of the HTML is being sent out in an HTML email, then embedding the CSS into the document is your most reliable behaviour, the CSS is always with the text of the email that way, and you (shouldn't) get broken formatting. (Clever mail clients stripping it out to avoid phishing/scamming/images with email confirmation codes on remote servers etc etc not withstanding)

  5. #5
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike, thanks. In fact I want to send this newsletter as an HTML email. I guess that in that case u are suggesting me for boddy-bedded css, right?

    However, I followed Paul's suggestion for a different div as well, this time for the small form at the top of the newsletter. But unlike the bottom one, instead of specifying a line height same as div height, the form is aligning to the top of div area, instead of being at the middle ...

    Any suggestion for this weired behaviour? Thanks guys once again.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    read in some sitepoint forums that I need to have all the styles embedded in the body, as I've done, to design a newsletter.
    Sorry I missed the newsletter bit

    Even still you can use classes and id's but you put the whole styleblock in the body (even though its invalid html - but it won't matter because the email client strips most of everything anyway.)This will make it easier to work with later.

    You just need to make sure you override the email clients stylesheet. See my other posts here and some other links:

    http://www.sitepoint.com/forums/show...ight=css+email
    http://www.sitepoint.com/article/cod...il-newsletters
    http://www.xavierfrenette.com/articl...rt-in-webmail/

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Any suggestion for this weired behaviour? Thanks guys once again.
    This is one occasion when you wuill have to use a class because ie and firefox are never going to agree on this.

    Firefox is already aligned but ie has trouble with form elements. You will need to do something like this. Wrap a p tag around the elements in quiestion.

    e.g.
    Code:
    <td align="center" ><div style = "background: #C6181E; width: 274px; height:32px; line-height:32px; font-face:Verdana; font-size:11px; margin: 5px 0px 3px 0px; padding:2px; color:#C3D6E0; font-weight: bold;"><p class="line-up">Inscription newslettres
    		   <input style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #8D846B;" type="text" size="12"/>
    		   <input type="submit" style="margin: 1px 0px 0px 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; background-color: #FFFFFF; color: #C6181E;" value="Go" />
    		  </p></div></td>
    then add this css:

    Code:
    * html p.line-up {padding-top:4px;}

  8. #8
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What u tells work like a magic Paul ... u r a genious in CSS.

    Thanks.

    PS. Tx for the other links as well. Cheers.

  9. #9
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May be one more thing. The client for whom I'm developing it, wants to know if it is possible to see what receivers are doing with the newsletter, like how many of them are opening the mail, how many of them are clicking on different links, and if yes, to which link, etc.

    Any tips for that? Is it possible to do that? I am thinking that may be I can include a variable with each link, and when pages with those variables will be loaded, somewhere a counter will calculate stuffs at the backend.

    Wondering, is this the right way to do, or there's a better way.

    Thanks for any tips.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Wondering, is this the right way to do, or there's a better way.
    That type of question is better aimed in the "Manage your site" section of the forums or there may even be answers there already. Its not really an area I have much experience with as I'm usually on the front end of things

  11. #11
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Sheffield, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kigoobe
    May be one more thing. The client for whom I'm developing it, wants to know if it is possible to see what receivers are doing with the newsletter, like how many of them are opening the mail, how many of them are clicking on different links, and if yes, to which link, etc.

    Any tips for that? Is it possible to do that? I am thinking that may be I can include a variable with each link, and when pages with those variables will be loaded, somewhere a counter will calculate stuffs at the backend.

    Wondering, is this the right way to do, or there's a better way.

    Thanks for any tips.
    1) Number of people opening emails:

    That would be acheived by having some asset (image, css, javascript or whatever) in the email that is served from your client's web server and includes some kind of query string data to register that that item had been downloaded from the email rather than just found, or from being used on the site.

    Of course, as I noted, many email clients these days (Outlook, OE, Thunderbird) refuse to show remote images because these techniques are used to confirm email addresses are live and read for spammers.

    2) People clicking links

    Dead easy, on the link add parameters to say "this was clicked from newsletter issue 4" or something, and at the server count clicks from each news letter, but as Paul notes, that's a coding issue not a CSS issue.

  12. #12
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once again guys.

    I've added all the styles directly in html; like div style="" or span style="", etc. However, in one place I had to place style in an embedded way, and since I am not supposed to to add style between </title> and </head>, I've added that piece of code just after the <body> tag.

    Here is the code:
    Code:
    <body style="font-family:Verdana, Arial, Helvetica, sans-serif">
    <style type="text/css">
    	a:link { text-decoration:none; }
    	a:visited { text-decoration:none; }
    	a:hover { text-decoration:underline; }
    	a:active { text-decoration:none; }
    	* html p.line-up {padding-top:4px;}
    </style>
    
    <table align="center" width="610" cellpadding="0" cellspacing="0" border="0"> ... etc.
    Can anybody tell me if it is the right way to to add stylesheet for a newsletter? I will mention that for * html p.line-up, I've taken Paul's suggestion (otherwise I'm more used to use .line-up simply), so that should be OK. Just wondering whether I need to add something before the a of a:link etc.

    Thanks again.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Some hotmail clients strip everything from the head so its safer to put the style block in the body section although normally that would be invalid but its not an issue when dealing with email clients.

    However some email clients also apply default styles to all the anchors (and maybe other elements) and also replace the body tag with something like xbody from which they target their styles. This will of course over-rule the styles you have set.

    What I usually do (although I've only done about half a dozen of these) is to wrap the whole page content in a div called #outer and then address all my styles with the prefix #outer which makes sure they over-ride the emails clients style.

    e.g.
    #outer a{color:red}
    #outer table {etc...}

    I also notice that some email clients strip the doctype or a add a transitional doctype without uri so you probably have to expect that those clients based on iE will be in quirks mode.

    The best way of course is to test and send yourself the newsletter and see what gets broken. Set up a few major hotmail accounts and see what happens.

    Check the code that gets returned to you and then you can create strategies to overcome the problems.

    In the end its still down to trial and error

  14. #14
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul. So the page should look like ...
    <div id="outer"><html> .... </html></div>, right?

    Besides, I had one more question, may be it's not really CSS related, but I thought this is related to this discussion, so I may post it.

    My server is not allowing bulk mailing. I need to send this mail to some 15 - 20k people. Do you know anybody whom I can subcontract the work for sending mails, who has his own bulk mailing server?

    Thanks again.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks again Paul. So the page should look like ...
    <div id="outer"><html> .... </html></div>, right?
    No - sorry I wasn't very clear on this. The outer goes inside the body because the rest may get stripped anyway.

    <body>
    <div id="outer">

    content etc...


    </div>
    </body>
    [/code]

    My server is not allowing bulk mailing. I need to send this mail to some 15 - 20k people. Do you know anybody whom I can subcontract the work for sending mails, who has his own bulk mailing server?
    Have a look in the scripts and online services section and if you don't see anything applicable then post in there as you are more likely to get a reply there

  16. #16
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for all ur help Paul. I've corrected my code.

    thanks again.

  17. #17
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that everything seems to be OK, I'm facing a problem with hotmail. I'm having a div like this:
    PHP Code:
    <div style "background: #C6181E; width: 274px; height:32px; font-face:Verdana; font-size:11px; margin: 5px 0px 3px 0px; padding:2px; color:#C3D6E0; font-weight: bold;"
    While in yahoo and gmail it is appearing properly, hotmail is changing this div to :
    PHP Code:
    <div style="background:#C6181E;width:274px;height:32px;font-size:11px;padding:2px;color:#C3D6E0;font-weight:bold"
    thus, hotmail is stripping the font face and margin styles.

    Any idea why it is happening and how to get rid of this problem? Thanks.

  18. #18
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, the margin problem I've solved by adding padding in other divs and removing margin from this div. Seems hotmail stripps the margin style ....

    But apart from that, hotmal is having other problems ... seems this is the worst mail client for newsletter ...

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    font-face !! What's that

    Do you mean font-family.

    Yes hotmail is notoriously bad and margins are often ignored. You just have to be creative as you have done and compensate in other ways

  20. #20
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I use font-face often by not using font-familly (multiple font-faces, isn't it?) as I use common fonts like verdana what's available in all the computers any way. Isn't that correct?

    Yeah, it's such a fascinating thing that I keep learning new things everyday ...

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Isn't that correct?
    No its not correct

    There is no font-face in css (apart from @font-face which is different).

    font face is html:
    HTML:
    Code:
    <font face="garamond, times">this font is not sans-serif</font>
    font-family is the css equivalent (more or less).
    CSS:
    Code:
    <span style="font-family : garamond, times;">this font is not sans-serif</span>

  22. #22
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul. Thanks once again. Have learned another thing ...

  23. #23
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And just wanted to check it up with aim.com (aol) ... no style has come ... what i've made till now is OK for yahoo, gmail and hotmail, but aol is frustrating me completely ...

  24. #24
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After looking closely, this is what I found. Aim is disturbing all the div styles. For example, I had a div like:
    PHP Code:
    <div style " font-family:Verdana; font-size:12px; margin:20px 0px 20px 0px; padding:10px; color:#C6181E; font-weight: bold;">
    OUVERT<br />
    <
    div style="font-size:18px;margin:0px;padding:0px;">7j/7</div>
    09H30 19H30
    </div
    this one became, in aim as
    PHP Code:
    <div style="" style= = "= font-face:Verdana;= font-size:12px;= margin:20px= 0px= 20px= 0px;= padding:10px;= color:#C6181E;= font-weight:= bold;"=>
    OUVERT<br /=>
    <
    div style="font-size:18px;margin:0px;padding:0px;" style="font-size:18px;margin:0px;padding:0px;">7j/7</div>
    09H30 19H30
    </div
    Edit: Got the solution, it was because I was leaving space, like div = "style etc. should be div="style ... no space, or aol / aim destroys the style ... hope someone else will get benefitted from these findings ... i mean, the newcomers ...

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Keep posting anything extra you find as this topic gets searched often and it will help others .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •