WordPress + Thesis Tutorial: Finding and fixing phantom spacing on your web page

I came across something while working with WordPress and Thesis that I know will help at least one person and possibly save them hours of frustration. So here is the tutorial.

I was working on a revision to a visual layout of a website I previously helped develop on the Thesis theme framework. I spent more time than I should trying to find out where the extra space between webpage elements was coming from. Was it the CSS? It had to be.

I checked the CSS using my editing tools. No extra margin, no extra padding, yet I still could not get page elements aligned the way I wanted. There was a mysterious “gap” between page elements. No matter what I tried with my CSS (other than negative margins—no bueno in this case) the gap would not go away.

I finally got smart and looked as source code—the html. Typically I get to the source code earlier in the process, but this time I thought all my issues were in CSS but they were not. The key to the solution lie inside the HTML.

I recorded the video tutorial below in hopes that it might help you. If it does, let me know in the comments.

Be sure to click on the small, 4-arrow button in the bottom right corner of the video (as shown in the graphic below) to see the video at full size. Hope this helps.

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, , , , , , , , , , , ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.

  • NickReese

    What editor is that? Looks sweet.

  • richer_image

    Nice tip thank you. I assume the technique you used to apply css to a particular post/page can also be used to apply any other css style to an individual post?

    Also – please let me know what that cool ruler was 🙂

    Thank again.

  • Pingback: uberVU - social comments()

  • deauxmain

    Very helpful tutorial Berchman. This is the kind of problem that you know should be an easy fix, but can also waste precious time when updating a site. The coloring of divs really makes it easier to see what's going on too. Thanks for a quick and easy solution.

  • Okay, man, I watched it, great points, thank you. So yes, what is that cool ruler? Which apps are you using? If you don't mind, that is.

  • Ah yes. My tool palette. I'm on a Mac. I use BBEdit for html/php, and CSSEdit for CSS. The cool “ruler” is a nice app called “XScope” http://iconfactory.com/software/xscope

    Are you in Taos, NM? Great place.

  • Glad you found that helpful. Use it all the time to show me overlaps, etc.

  • Absolutely. You would need to know the ID of the post and you could style based on ID. You would need to find it in the html, then build your CSS tags appropriately.

    Yes, the ruler: http://iconfactory.com/software/xscope
    Great little app.

  • My CSS editor is CSSEdit. It’s a Mac app. I like it a lot. Makes the styling go much quicker for me. Fits my workflow. I give it a big thumbs up.

  • Lisa

    Why didn't you have to use .custom in front of div#post-113?

  • Pingback: Ultimate Thesis User Guide()

  • You only use .custom to overwrite things Thesis has already styled.

  • Matthew is correct.
    You use '.custom' in front of any page element to over ride what is
    already set style wise.
    Let me know if you have any questions.

  • Matthew is correct.
    You use '.custom' in front of any page element to over ride what is
    already set style wise.
    Let me know if you have any questions.

  • Maryg

    You mention your “CSS” program. What would that be exactly? While I could follow your video somewhat, you did go a bit too quickly for those of us not so familiar with CSS. You clicked and deleted so quickly and we’re left wondering, “Where IS he doing that???”
    My problem with ‘spacing’ is phantom spacing in between lines of text and between paragraphs. No matter what I do, I cannot get the exact spacing I need to make it look neat and clean. Thanks

  • Pingback: Ultimate Thesis Theme User Guide of Resources :: Stage()