Sociable Plugin Messing up Post Title Alignment

HTML & CSS
1

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

2

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

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

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

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.


<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.


<div class="sociable s1"> etc....   </dv>
<div class="sociable s2">

And then applies the styles to s1 and s2 as appropriate.


.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.


.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.