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

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

vfm
vfm's picture
Offline
Regular
Last seen: 2 years 13 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 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

vfm
vfm's picture
Offline
Regular
Last seen: 2 years 13 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 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

You still haven't applied the

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.