Single Spacing In A Text Widget

  • Author
    Posts
  • #712808

    mrstrongest
    Member

    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/

    #712919

    macmanx
    Staff

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

    #712950

    mrstrongest
    Member

    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.

    #713017

    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.

    #713033

    mrstrongest
    Member

    Ah! I was afraid it might cost money… : (

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

The topic ‘Single Spacing In A Text Widget’ is closed to new replies.