Tag Archives | CSS

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.

Continue Reading

Tags: , , , , , , , , , , , ,