Grow your CSS skills. Land your dream job.

[Solved] Large copy margin issue

  • # December 14, 2009 at 2:55 pm

    Hi Guys and Gals. I was hoping one you may have the answer to an issue I’m having. I’m creating an email newsletter with pricing for a particular product. I’m trying to make the price quite large, but the larger I get with the font, the larger the gap at the top of the price gets. I have tried everything from Margin and Padding set to 0, etc. Any help would be greatly appreciated. The following is a link to a screenshot of the problem. http://www.simsstaging.com/_sites/gardenGallery/picture.jpg. The following is also the HTML. Thanks for taking the time to look at this. Much appreciated.

    Code:
    Inline Image

    Pansies

    The hardiest of all garden annuals, pansies tolerate much cooler temperatures than other flowers. Heart-shaped blooms bring beautiful colour to your early spring garden. For best results, plant in full sun to part shade. Many colours to choose from.

    79¢

    4 pack. Reg. $1.29.

    Code:
    td.mainbar h1.price {
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 180px;
    display: inline;
    letter-spacing: -3px;
    font-weight: normal;
    color: #000000;
    text-transform: uppercase;
    }
    # December 14, 2009 at 2:59 pm

    line-height:100%;

    Play with the value, but that should solve your problem.

    Also – keep in mind, CSS may not display uniformly when it comes to email. Test in multiple environments before you send it.

    # December 14, 2009 at 3:10 pm

    Thanks for responding jlknauff. I did try that. I also tried using line-height: 1em; , neither of these solutions seem to work. Do you have any other suggestions?

    # December 14, 2009 at 3:15 pm

    Line-height:0; .. what happens then?

    Providing a live link to the newsletter would greatly help.

    Also, reiterating what jlknauff said, it’s very important to note that CSS will NOT display the same across all email clients. It is the one time where tables are your bestest friend.

    # December 14, 2009 at 3:38 pm

    Hi Guys, thanks for the responses. It turns out it was the superscript html tag that was causing the issue. Thanks again.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".