SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sociable Plugin Messing up Post Title Alignment

    I just installed the Sociable Plugin. It affected the alignment of the post titles on my homepage
    differently in IE and FF

    In FF:

    o Not all the social buttons are on one line as they are in IE

    In IE:

    Halfway down the homepage, the title of the second post is displaying on 2 lines instead of one
    This is right under the first appearance of the Sociable icons

    <...deleted...>

    Would appreciate any advice

    George
    Last edited by Stevie D; Mar 27, 2012 at 13:38. Reason: Inappropriate URL removed

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Sorry but this is a family-friendly forum, and although you hadn't linked the URL, it's still inappropriate to have it mentioned here. If you can recreate the problems on a "clean" page, feel free to post a link to it, and we'll see what we can do to help. For what it's worth, I'm not getting either of the problems you mention.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The social icons are on one line because there is not enough room for them in one line in that left container.

    In IE7 they fit on one line because the google plus icon is not shown and therefore they just happen to fit.

    You need to clear the h2 that follows the floated icons in IE7.
    .post h2{clear:both}

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks so much for that response. So, could you be a little more specific about whether I am adding that line or revising an existing line
    and in which file (style.css)?

    So, far I went into the socialable.css file and added 8px margins to the top line
    div.sociable { margin: 8px 8px 8px 8px; line-height: 1em; }

    That's not the most optimal solution since I have to make that change everytime I update the plugin

    So, if you could give me precise instructions on what line and file to revise, I'd really be grateful

    Also would be great to have all the Sociable icons aligned on one line in both IE and FF.

    Thanks

    George

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

    I'm not sure where the margins come into this exactly but if you want margins then you will have to apply margins either to the plugin code or to an existing wrapper. I assume you added the div called .sociable yourself so applying a margin shouldn't be a problem.

    The icons cannot fit into one line because that content section is only 550px wide and the icons in one line come to about 600px even if you squash them together and indeed there is even less width if they are next to a floated image. You are better off letting them wrap to two lines otherwise you will make it too awkward trying to have one long line in that left column because you would have to close the content div and then start another div that is 100% wide and then restart the content div again afterwards which means that the right column can't be anywhere near.

    You could force the issue but you would have to change the html and add classes to each social div to identify them separately.

    Code:
    <div class="sociable" style="float:left"> etc....   </dv>
    <div class="sociable" style="float: none; margin: 40px -80px 0 0;">
    The inline styles are for example only but you would need to add extra classes instead.

    e.g.
    Code:
    <div class="sociable s1"> etc....   </dv>
    <div class="sociable s2">
    And then applies the styles to s1 and s2 as appropriate.

    Code:
    .s1{float:left}
    .s2{
    float: none; 
    margin: 40px -80px 0 0;
    }
    That's a lot of work especially if you are not sure of how to apply things to that page.

    You would be better off just having the social icons at either the top or the bottom of the page content in a div of their own that spans the full width.

    For IE7 just add the code I gave you to the end of the CSS file.
    Code:
    .post h2{clear:both}
    I'm afraid I am going to have to close the thread now because it's not fair that other members cannot take part in this topic because of the adult content in the link that was removed.


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
  •