Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Sep 2011
    Location
    Atlanta, GA
    Posts
    9
    Member #
    29434
    EDIT: PROBLEM SOLVED.

    Hello everyone. First time poster here and I'm hoping you guys can answer this for question for me.

    I'm creating a html email sig for a client and everything went perfectly except for 2 things.

    This is what it should look like.


    Here is what it looks like now.


    As you can see the bottom rule is on the right side instead of falling under the icons. I'm not sure what I did wrong. Is there something I'm missing that is causing this?

    Any help would be greatly appreciate! Thanks guys!

    Here is my code:

    Code:
    </br>
    
    <div>
    <p style="font-weight: bold; font-family: Arial; font-size: 20px; color: #585d62; padding: 0px 0px 0px 38px; line-height: 0px; ">Laurie West</p>
    <p style="font-family: Arial; font-size: 13px; color: #d10272; padding: 0px 0px 0px 38px; line-height: 7px; ">CREATIVE COMMUNICATIONS DIRECTOR / OWNER</p>
    <a href="http://cranberrycopy.com" title="visit cranberrycopy.com" style="font-family: Arial; font-size: 13px; line-height: 2px; color: #74787e; padding: 0px 0px 0px 38px; text-decoration: none; ">www.cranberrycopy.com</a><br />
    </div>
    </br>
    
    <div>
    <a href="http://www.cranberrycopy.com"><img src="http://designjunxion.com/Images/ccsig/CC_sig_logo.jpg" alt="Cranberry Copy"></a>
    </div>
    
    <div>
    <a href="skype:cranberrycopy?call"><img src="http://designjunxion.com/Images/ccsig/CC_sig_04.jpg" title="Call Us On Skype" alt="Skype" style="float: left; padding: 0px 13px 0px 38px;"></a>
    <a href="http://www.cranberrycopy.com/contact/"><img src="http://designjunxion.com/Images/ccsig/CC_sig_06.jpg" title="Contact Us" alt="Contact" style="float: left; padding: 0px 13px 0px 13px;"></a>
    <a href="http://twitter.com/#!/CranberryCopy"><img src="http://designjunxion.com/Images/ccsig/CC_sig_08.jpg" title="Follow Us On Twitter"alt="Twitter" style="float: left; padding: 0px 13px 0px 13px;"></a>
    <a href="http://www.linkedin.com/pub/laurie-west/3/7b1/847"><img src="http://designjunxion.com/Images/ccsig/CC_sig_10.jpg" title="Visit LinkedIn"alt="LinkedIn" style="float: left; padding: 0px 13px 0px 13px;"></a>
    <a href="https://www.facebook.com/pages/Cranberry-Copy/275999059085278"><img src="http://designjunxion.com/Images/ccsig/CC_sig_12.jpg" title="Like Us On Facebook "alt="Facebook" style="float: left; padding: 0px 13px 0px 13px;"></a>
    <a href="http://www.cranberrycopy.com/feed/"><img src="http://designjunxion.com/Images/ccsig/CC_sig_14.jpg" title="RSS Feed" alt="RSS Feed" style="float: left; padding: 0px 13px 0px 13px;"></a>
    </div></br>
    
    <div>
    <img src="http://designjunxion.com/Images/ccsig/CC_sig_16.jpg" style="float: left; padding: 2px 0px 0px 0px;" alt="Cranberry Copy">
    </div>
    </br>

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    What's the <lighter> tag? I've never heard of it before. Is it deprecated, or is it something new? I would go with the <p> tag, that's guaranteed to work.
    You don't need to float the icons.
    I'm not quite sure what to do about the image.. Sort of hard to troubleshoot, because of the inline style.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Junior Member
    Join Date
    Sep 2011
    Location
    Atlanta, GA
    Posts
    9
    Member #
    29434
    Thanks for the quick reply!

    I thought lighter dealt with font weight correct? ok I will change them to p and take the float out.

    The image is driving me crazy! I have tried everything I can think of. The odd thing about it is that is shows up correctly in the browser but not in certain mail clients.

    EDIT: I have updated the code. That fixed the font color problem! Thanks! The image is still off though.

  5. #4
    Junior Member
    Join Date
    Sep 2011
    Location
    Atlanta, GA
    Posts
    9
    Member #
    29434
    Ok I took the float out and it fixed it! Thanks a ton man!!

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    It looks like you div with the bottom rule is floating up beside the icons.
    try adding a clear:both to the style, that should push it under the icons.

    <div>
    <img src="http://designjunxion.com/Images/ccsig/CC_sig_16.jpg" style="float: left; clear:both; padding: 2px 0px 0px 0px;" alt="Cranberry Copy">
    </div>

    Or, you could remove the float altogether.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Junior Member
    Join Date
    Sep 2011
    Location
    Atlanta, GA
    Posts
    9
    Member #
    29434
    I may add the clear to it as well after I test it on some more email clients. It does seem to be fixed on the 3 or 4 I have tried. Thanks agains guys!


Remove Ads

Posting Permissions

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

Search tags for this page

signature not lining up

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com