Can't figure out where extra space is coming from?

[kingdingbat]

Hi there. We're working on a new website with Wordpress using a custom template, but on the front page there is extra vertical space that we cannot pin down, despite lots of searching. Here is a screenshot:

 

http://img22.imageshack.us/img22/9013/ggat.png

The area in red is the extra space

 

 

The website can be currently seen at www.troyandray.com

Using the browser dev tools we've narrowed it down to the class "entry-header" or possibly "Post-1...." but editing either class doesn't seem to fix the problem.

 

Also, curiously, this extra space is absent on other pages, for example, if you click the article's title. I've compared the CSS between the two pages and cant find any significant difference. Any thoughts?

[dsonesuk]

If you look the space finishes where the sidebar bottom edge finishes, this usually indicates that the content container is either being affected by float from sidebar, or content container is to wide to sit beside with sidebar.

[newseed]

Not sure how much you have changed the CSS but have you reverted back to the original css? Reason I asked is that the css has a mixed of percentages and pixels in various places in your framework.You might say this is a quick fix but without knowing what the original css looked like I can't say that this will not produce another problem elsewhere.Line 117 of your css #primary, change the width to 66% and add overflow: hidden.

[kelly2marie]

One of the best ways to determine what is going on is to use Firefox with an addon called "Firebug". It allows you change the CSS for the selected html element to see what happens. You can turn off certain styles or property:value pairs to see the impact this has on the page. You can also write property: values to see what happens. (Or, you can use Google Chrome which has "Inspect Element" when you right click. No need to install anything.)

 

Basically, right click on the area or extra space, and choose "Inspect with Firebug". Of course, you first have to install the Firefox addon. Anyway, firebug will open that portion of the html where you right clicked.

 

Click on an html element and look at the CSS off to the right. That's where you can turn off css properties.

 

I did take a look with Firebug, and this is a tough one, so don't give up quickly. I think newseed's response will get you in the right direction. In addition, look at the following screenshot....http://expression-web-tutorial.com/firebug.html the #primary div is highlighted in the page. For this div, remove the widths entirely and set the right margin of approximately 300px or greater. This div should not extend clear across the page when highlighted. This highlight should stop where the right sidebar begins.

 

Basically, you float one column (the right sidebar), then the second column is not given a width, instead, just add a right margin that is equal to or greater than the width of your right column.

 

Go over your styles and be sure you have just one width for the right sidebar.

 

Also, insert the floated column first (source order matters when floating), the non floated next. You have done this correctly.

 

Notice the CSS in the screenshot for #primary (line 35)...... get rid of float:none, get rid of z-index. The z-index has no impact when styling a static div. (use z-index with absolute positioning to set the stacking order.)

 

Change margin: 0; to margin-right: 300px; or more.

 

Then for #primary (line 117): DELETE IT all together. Not needed. The width should not be set on this div (unless you decide to float this div).

Edited March 17, 2014 by kelly2marie

[dsonesuk]

You have to careful when making changes to wordpress themes, usually these styles are there for a reason, and come into action when for instance the layout changes from 1, 2 or 3 column layout, if you add overflow: hidden; to #content the problem disappears, and adding this should not cause problems if a different layout is used.