SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie with Alignment Issues (Chrome, Safari)

    Hello,

    I'm trying to make [Twitter, FB] icons in my footer behave like inline elements, but they don't line up in Chrome and Safari. They render fine in Explorer and Firefox.

    The page is located at: http://tda.org/displaycommon.cfm?an=1&subarticlenbr=111

    The relevant CSS and markup follow. Any insight would be greatly appreciated!!

    _____________________
    CSS
    _____________________

    #perks-footer-wrapper {
    width: 978px;
    min-height:50px;
    clear: both;
    border-top: 1px solid #dadada;
    width: auto;
    margin: 30px 0 0 0;
    padding: 0 15px 0 15px;
    vertical-align: middle;
    text-align: left;
    }

    #perks-footer {
    margin-top: 18px;
    }

    #perks-footer .perks-footer-left {
    float: left;
    }

    #perks-footer .perks-footer-right {
    float: right;
    }

    #perks-footer .perks-footer-right img {
    border: none;
    padding: 0 5px 0 5px;
    height: 18px;
    vertical-align: top;
    }

    #perks-footer p {
    padding: 0 0 0 0;
    }
    _____________________
    HTML
    _____________________

    <div id="perks-footer-wrapper">

    <div id="perks-footer">

    <p class="perks-footer-left">TDA Perks Program ...</p>

    <p class="perks-footer-right">
    <a href=...">Subscribe to eNewsletter</a> &nbsp; &nbsp;|&nbsp; &nbsp;
    Join Perks on Facebook and Twitter! &nbsp;
    <a href="..."><img class="perks-footer-right" src="..."/></a>
    <a href="..."><img class="perks-footer-right" src="..."/></a>
    </p>

    </div>

    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maybe something like this would be better:

    Code:
    img.perks-footer-right {
    float:none;
    display:inline-block;
    vertical-align:middle;
    }
    .perks-footer-right a{
    display:inline-block;
    vertical-align:middle;
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul! I tried your suggestion, and wasn't able to get it to work. It gives me some ideas, though, that I'll try out.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Teresa,

    I tested the code on your live site and it was working fine.

    The problem with your floated approach is that you have images floated inside anchors that are not floated so browsers are not quite sure what to do and Chrome drops the image down. Either float everything or have it all as inline. Vertical-align:middle does not apply to block elements or floats but by to inline and inline-block elements (and table-cells).

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by Paul O'B View Post
    Hi Teresa,

    I tested the code on your live site and it was working fine.

    The problem with your floated approach is that you have images floated inside anchors that are not floated so browsers are not quite sure what to do and Chrome drops the image down. Either float everything or have it all as inline. Vertical-align:middle does not apply to block elements or floats but by to inline and inline-block elements (and table-cells).
    Paul,
    Thank you so much!!! You're correct--your suggestion works; I must have done something differently last time. Thanks for the explanation and generosity--it's greatly appreciated...


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
  •