WordPress.com

1. mrstrongest
   Member
   Sep 23, 2011, 2:37 AM

   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. macmanx
   Happiness Engineer
   Sep 23, 2011, 6:24 AM

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

3. mrstrongest
   Member
   Sep 23, 2011, 11:33 AM

   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. andrewspittle
   Staff
   Sep 23, 2011, 5:18 PM

   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. mrstrongest
   Member
   Sep 23, 2011, 6:08 PM

   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.