Hi, I’m looking to place sociable within a neat single line on my blog (along with other text and links). Basically I would love to remove the sociable <div> block and replace it with an overall sociable <span> one, that way inline formatting works and it seems to render happily on more browsers.
Is there an option to do this without hacking your plugin?
Why not just set the div to display inline via CSS?
Most browsers, even the older ones support display:inline …
The block element essentially becomes an inline element then…
Yup, take care if you change a code. Code is Poetry, not a non-fiction work. ^^
Be patient. \(^o^)/
I *could not* get it to work via display:inline. It was literally driving me nuts. The div code rendered fine on FF 3.5, but broke on 3 and IE as usual, sucked. The only happiness for IE, FF, Safari was to use <span>. I ended up modifying the plugin (which I wanted to avoid!) but alas, my sanity couldn’t find the combo that would work.
To sum up my experience without showing screen shots, I have a single line that has text that’s float: left, and sociable float: right. When in a <div> for whatever reason, IE and FF 3 would render the <div> slightly lower and the line wasn’t straight with the text on the left (even with display:inline which I tried), again it looked fine in safari and FF 3.5 and IE 8 (I think).
The only way all of my tested browsers worked was by using <span> for both left and right sides of the line. Very annoying! I hate hacking plugins to make this work, but I like the was sociable displays a neat, small tidy row and so I was determined to fix it.
So personally, I think it would be a piece of cake to add a toggle to the preferences panel that simply told sociable to use <div> or <span>. I know I’d appreciate it!
If you guys have any ideas why I might have had these problems, I’d love to hear them.
Why you don’t add a selection state to divide the groups of loaded code between FF 3.5 and FF 3 and IE and the others?
Ok, but did you ensure the style was being applied…
CSS cascades, so styles won’t always apply… you may need to add
!importantto the defintion to force it..
Of course the plugin should really support paramters to allow you to change this, ala WordPress style…
I’m sure it can be added (easy), but that’s no use when it comes to upgrading the plugin…
@mossackanme, If I understand you correctly, you’re talking about doing something like
<!--[if lte IE 7]>for each broken browser right?
If that’s the case then I’ve been really trying hard not to have different code for each browser. I’ve done it in a couple of times, but since <span> worked here on all of them I didn’t want to add conditional statements for each browser type.
@t31os_, I believe I overlooked the use of !important (I’m learning as I go here! 🙂 ). That sounds like a solid reason that adding
display:inlinedidn’t have a visible change.
I’ll have to come back to this and try that out later on when I’ve squashed my laundry list of other fixes and bugs that I need to hunt down.
I don’t know if it will help, but it could very well do, so i thought it worth a mention…
You know where we are if you get stuck… 😉
- The topic ‘Anyway to remove the encasing sociable <div>?’ is closed to new replies.