Question

I’ve been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled a few inches to the right, all of which consists solely of whitespace.

It’s doing this on several pages, but not all.

Here is a page on which I have the issue – http://www.princewebdesigns.com/staging/gallais/our-firm.html

Here is a page on which I do not have the issue – http://www.princewebdesigns.com/staging/gallais/index.html

I’ve tried debugging in FireBug but I can’t find any divs or elements that are causing the page to be wider. Is it possibly related to a float? It appears to be an issue in all browsers.

Any help would be appreciated.

PS – I know the nav links are not functioning, it’s because I’m temporarily housing the site in my web server’s staging directory.

Answer 1

css class .bluebar h1 has a property width: 70em;

em should not be used to define width of elements. Your browser calculates the h1 to a font-size of 28px, which makes the .bluebar 28 x 70 = 1960px wide. For a proper explenation on em and other css units, see w3schools

Both Firebug and Dragonfly allow you to hover the page. This is default behaviour in Dragonfly . In Firebug you can turn it on by clicking the arrow button on the top left of the firebug window. This way you can find the elements quite fast.