5 replies [Last post]
vfm
vfm's picture
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT+10
Joined: 2010-11-16
Posts: 18
Points: 28

Hi,

I think I've been staring at this too long and cant figure out why I have a tiny gap between my header and my content (both at the top and on the right-hand side. You can see what I'm talking about here: http://www.wildaboutjuice.com.au/template.html

Thanks in advance.

Cheers,
vfm.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9557
Points: 3614

Edit your css as

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vfm
vfm's picture
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT+10
Joined: 2010-11-16
Posts: 18
Points: 28

Hi Gary, Thanks for the tips

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9557
Points: 3614

You haven't yet made the

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vfm
vfm's picture
Offline
Regular
Last seen: 3 years 49 weeks ago
Timezone: GMT+10
Joined: 2010-11-16
Posts: 18
Points: 28

Hey Gary, It definitely

Hey Gary,

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

Cheers,
vfm.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9557
Points: 3614

You still haven't applied the

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.