SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Inline CSS 'bug' - help me squish it!

    Hi all,

    I'm working on a responsive html email template. A lot of email browsers will only read inline styling, but I find it really hard not to make mistakes working with that kind of code, so I've developed a workflow where I write my HTML with an embedded CSS stylesheet, then run that code through Premailer, which moves the styling inline for me. Pretty sweet!

    In this case as I'm making a responsive template I've run all but the media query through premailer, then pasted it within <style> tags in the head of the document so that the design can remain responsive in email browsers that do pay attention to this part.

    Unfortunately, something in my template has broken during the process of making the styling inline. In my design, a logo at the top of the document resizes and moves to the top when the browser window is less than 480px wide. In the embedded version, the logo remains centred, whereas in the inline version it moves to the left.

    I'm finding it hard to work out why this is happening, in order to be able to fix it. Can anyone help?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi cheli. Firstly, well done for setting this up so well to make the situation clear and easy to assess. (It's rare to see it so well done. )

    From looking at it, it seems that in the working version, you have id="contentWrapper" on the surrounding <table> that sets its width to 320px, while this is not replicated in the version that's not working. So you could do something like this:

    Code:
    <table style="width: 320px !important" align="center" border="0" cellpadding="0" cellspacing="0" height="100" width="600">
    Not very pretty, but that's HTML email for you.

    Edit:

    Hm, now I realize that this messes up the larger version of the layout. Since you still have @media rules, perhaps just replace the id attribute on the table that seems to have gone missing.


    Edit:

    Yes, tested that, and it's what I should have suggested first up. Just replace the missing ID:

    Code:
    <table id="contentWrapper" align="center" border="0" cellpadding="0" cellspacing="0" height="100" width="600">

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m, you come to my rescue again! I'm very glad you found my explanation clear - I know it's hard to explain things sometimes so I'm glad it wasn't too garbled

    Replacing the 'contentWrapper' ID works on my end too - I've even realised why it happened too so I think we can declare this case solved!

    In Premailer, you can ask it to remove unused IDs when converting to inline styles. I'd checked that option; forgetting that with the media query removed, the 'contentWrapper' ID suddenly appears unused. Yay for easy and simple fixes

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Glad that helped. Thanks for the feedback.


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
  •