SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    unwanted spacing

    Here I am trying to learn the wonderful ways of html emailing using inline styles. Does anyone know why there are spaces between the 3 header buttons ( visit our page / register / ask a question )?
    They were originally all together but I changes the colours and now there is this spacing:

    http://umcwales.com/wp-content/uploa...m_update2.html

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hantaah View Post
    Here I am trying to learn the wonderful ways of html emailing using inline styles. Does anyone know why there are spaces between the 3 header buttons ( visit our page / register / ask a question )?
    They were originally all together but I changes the colours and now there is this spacing:

    http://umcwales.com/wp-content/uploa...m_update2.html
    You've set the table to have a width of 100%, and you've then specified the width of each individual cell. What happens there is that, where the total widths of the cells added together come to a different width than the overall table, the cells are enlarged/shrunk proportionally ... and that's what's happened here. The table containing the three header buttons takes a width of 605px, but the three cell widths together add up to 580px ... so there's an extra 25px to be spread between them, which is giving those gaps. The easiest way to fix it would be to give the third cell a width of 245 (the 220 you want plus the spare 25) ... or to give the table a width of 580px instead of 100%

    Why is the table taking a width of 605px? Because you've set it to 100%, which means it fills the available width. And the available width is defined by the cells beneath it, which are a 10px-wide spacer column and then a 595px-wide image.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Nicely explained, and sorted, many thanks - Glad css has replaced the use of tables!!!


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
  •