Gap which I can't find

Edit your css as follows:

#header {
    border-bottom: 1px solid #8D7B6F;
    height: 111px;
    overflow: hidden;
    text-align: left;
    width: 865px;
    }

#content {
    background-color: #FFFFFF;
    clear: both;
    margin: 0;
    padding: 0;
    }

#rhc_about {
    background: url("http://www.wildaboutjuice.com.au/images/about_us.png") no-repeat scroll right 0 transparent;
    color: #000000;
    display: block;
    float: right;
    overflow: hidden;
    padding-left: 30px;
    padding-top: 100px;
    text-align: left;
    width: 659px;
    }

The gap below the header is due to the floating link/image overflow. Deleting the height plus the overflow property allowed the header to contain the float element.

The gap on the right isn't really a gap. The background image just doesn't quite reach that far. Aligning it to the right fixed it.

Other changes serve to remove opportunities for error, leaving a more robust layout.

cheers,

gary

Hi Gary,

Thanks for the tips they worked out great! However, I'm still seeing the same problem in Chrome. Is there a workaround/hack I should use to fix the issue?

Cheers,
vfm.

You haven't yet made the changes, and I am not familiar enough with Chrome's tools to edit the css all that well. What I did manage tells me the changes I showed you will work in Chrome just fine.

Edit your css file to reflect the changes I gave you, then if there's still an issue, we can know better what to do.

cheers,

gary

Hey Gary,

It definitely worked in Firefox & IE but it still appears to be the same in Chrome.

Cheers,
vfm.

You still haven't applied the fixes to your page.