Need help? Check out our Support site, then


Single Spacing In A Text Widget

  1. The first line in my sidebar used to be simply:

    Portfolio Thumbnails

    I'm trying to change it to:

    Portfolio Thumbnails
    (click to see full-size image)

    so the two lines are centered and single-spaced.

    I came up with some code that seemed to work perfectly in the Visual Editor, but when I pasted the corresponding HTML code into a revised text widget, it skipped a line (inserted a blank line) between the two lines of text in the sidebar.

    You can see this result at the top of the sidebar in my blog-- I left it that way.

    Here's the HTML I used (it inserts a 1-pixel high vertical space between the two lines):

    <p style="text-align: center;"><span style="color: #382e6b; font-size: 120%;">Portfolio Thumbnails</span>
    <img class="aligncenter size-full wp-image-338" title="BlankVertSpace.1pixels" src="http://markarmstrongillustration.files.wordpress.com/2010/05/blankvertspace-1pixels.jpg" alt="" width="50" height="1" /><span style="color: #382e6b; font-size: 100%;">(click to see full-size image)</span></p>

    Question: how can I get the two lines so one is directly under the other without having a blank line inserted between them?

    Thanks a lot for your help.

    Mark A.
    Blog url: http://markarmstrongillustration.wordpress.com/

  2. They seem to be correct on your blog now. Were you able to resolve the issue?

  3. Sorry, no.

    It still looks to me like there's a blank line between the two lines of text-- an obvious gap; a gap much bigger than the 1 pixel I tried to insert between the lines.

    When I read your comment, I thought perhaps it was a "browser display effect." I'd only been looking at the results in Safari, so I called up the blog on Firefox, and the gap between the two lines is still there-- identical, I'd say.

    What really puzzles me is that as I mentioned before, if I plug the same HTML code into the HTML Editor on a Create New Post page, and then look at the results in the Visual Editor, the text looks great: two lines, one above the other, with just the 1-pixel vertical space between them.

    Could you try that experiment? I think you'll see that the gap in my sidebar looks a lot bigger than what you'll see in the Visual Editor. Thanks.

  4. Okay, the spacing that you see is actually just from the default styles for text in your sidebar. It's not a margin or height issue but is rather from the line height defined for text in your sidebar.

    The line height is set to:

    line-height: 2.2em;

    This is what causes the gap you see. If you were to use a custom design upgrade you could adjust this spacing with custom CSS.

  5. Ah! I was afraid it might cost money... : (

    Many thanks for the info, I'll see if I can come up with a workaround.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.