Help with image alignment

Posted on 2011-10-12
Last Modified: 2012-05-12
Please forgive me, but I can't link to my site or even have the URL found on EE in a search. The website in question is at (down the left side):

s       XXXXX      
d       XXXXX      
s       XXXXX      
l       XXXXX      
a       XXXXX      
w       XXXXX      
a       XXXXX      
z       XXXXX      
dot       XXXXX      
com       XXXXX      

The four addresses at the bottom used to be text. I needed to put them in an image. So I thought I made an identical image...

When I put the image in, the addresses all lined up nicely under the grey text above it.

Then I took the image and I sliced the addresses into four .gif files.

When I put all four addresses in, they no longer line up with the grey text in the column above.

I will take ANY fix for this, even an unconventional solution.

Thank you in advance for any help!


Question by:mellijae
    LVL 15

    Expert Comment

    by:Jagadishwor Dulal
    Don't understand well can post the image and what u want ?
    LVL 9

    Expert Comment

    Please refer to custom.css there is padding for <li> tag used for displaying links, however there is no padding added for the address image.. add same padding and size to the <li> tag used for images.

    div#footer>ul>li {

    Open in new window

    LVL 4

    Accepted Solution

    Each of "grey text in the column above" is padded 22px on the left. The current css setting is something like this:

    div#footer > ul > li {
        padding-left: 22px;

    Open in new window

    To align the images to these columns try adding this to the bottom of your css file:
    li.vcard img {
        padding-left: 22px;

    Open in new window


    Author Closing Comment

    You are awesome; thank you!!!!!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    CSS Scrolling text graphics 2 42
    Image Orientation On Website 6 22
    Specific DIV Hyperlink Color 1 25
    Hover Gone 16 16
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now