Author Box Text Not Aligned With Image


If you decide to use the author box option, AuthorSure will create an author box with your image in it, with the text of your short short bio aligned to the left of the image.

Here is an example of one such author box (as set up by Peter Abraham of Dynamic Net) but as you can see in this example, the text is not well aligned with the top of the image.

AuthorSure Rel=Author WordPress Plugin

Please note that you need to be a logged to read more. Membership is free. Log in on the right or Sign up here.

About 

Liz is part of DiyWebmastery - she creates WordPress sites for clients, and teaches WordPress SEO to her one on one WordPress coaching students.

Don't forget that to get support and a tutorial on how to use the plugin effectively, you need to sign up to our membership site. It's free.

Comments

  1. Thank you Liz for the thorough and detailed answer!

    I was able to apply the CSS adjustment; and it works well.

    Thank you again.
    peter.abraham recently posted..Why installing WordPress manually is more secureMy Profile

  2. ericbernalmobile says:

    I have a similar issue, but in my case, I am getting a tag right after the image/avatar – so that causes all the text to drop. Any ideas how that is getting in there? I don’t see it on the demos.

    • Hi Eric,

      I inspected the HTML source and there is an extra break. However, AuthorSure is not adding the break.

      I believe your WordPress theme, OneCommunity, or one of your plugins is prettifying the content section of the page and in doing so is adding the unwanted break. It might be that the function wpautop, http://codex.wordpress.org/Function_Reference/wpautop, is being called after the author box is added.

      On authorsure.com, the Author Box code has no spaces, line breaks

      <div class="authorsure-author-box"><img alt='' src='http://1.gravatar.com/avatar/54bffe70c260dfe26e21009ec6aab3eb?s=90&d=&r=G' class='avatar avatar-90 photo' height='90' width='90' /><h4>About <a rel="author" href="http://www.authorsure.com/author/admin" class="authorsure-author-link" rel="nofollow">Russell</a></h4><p>Technologist, software engineer, internet marketer and <a rel="nofollow" href="http://www.diywebmastery.com/about/" rel="nofollow">WordPress plugin developer</a> with experience in Finance, Telecoms and the Media.</p>
      </div><div class="clear"></div>

      Compare this to the prettier HTML generated by your theme:

      <div class="authorsure-author-box"><img src="http://www.xloveagain.com/wp-content/uploads/avatars/31/e3bb688d27ade15343a4b8b61025683f-bpthumb.jpg" alt="Avatar of Alyson Jones" class="avatar user-31-avatar" width="70" height="70" /><br />
      <h4>About <a rel="author" href="http://www.eloveagain.com/author/alyson-jones/" class="authorsure-author-link">Alyson Jones</a></h4>
      <p>Alyson is the Clinical Director and the visionary at Alyson Jones & Associates. She enthusiastically leads one of the largest counselling centers in the province of British Columbia and approaches her work with passion and commitment. She enjoys contribution, connection and community. Her work as clinical director, counsellor, public speaker, parent educator, teacher and author enables her to touch the lives of many.</p>
      </div>
      <div class="clear"></div>

      On your site each DIV, H4 is placed on a new line, however it is also adding a space after the image which is forcing the title down.
      Russell recently posted..Hiding The AuthorSure Author Box On Ecommerce PagesMy Profile

Ask a question or leave a comment

*

CommentLuv badge