5 replies [Last post]
vfm
vfm's picture
Offline
Regular
Last seen: 4 years 5 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: 2 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

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: 4 years 5 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: 2 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

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: 4 years 5 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: 2 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

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.