Content background isn’t stretching to cover all the content.

i see this in your css:

background: #eee1d4 url(images/wrapper-bg.gif);

Needs to be repeated vertically?

There seems to be a missing or extra </div> going on in that second link. And I’d be willing to bet it’s somewhere in your page.php template. If it were a background issue, it would behave the same way on the home page. Let me check it real quick. Hang on.

Hmm. No missing </div> tags. Doesn’t validate tho. And it’s not how I would have set it up. I’d have set up a dummy #main division to surround the #content and #sidebar divs. And I’d have created a #footer div rather than relying on paragraph tags to drop that footer down below the left and right content. The fact that it’s working okay on the front page may just be because the content there isn’t “long” like it is on the front page. ??

trapmuzik is right, you need to repeat you bg.

#wrapper {
    position: relative;
    left: 50%;
    margin: 0px 0px 0px -398px;
    width: 808px;
    border: 1px solid #4e2a15;
    background: #eee1d4 url(images/wrapper-bg.gif) fixed repeat-y;
}

I don’t see any missing </div> tags.

I’ve changed the style to the above and it’s now done the following;
https://carrgrange.co.uk/?page_id=14

Is there any code or info I can provide to help fix this problem?

Thanks for the help so far though.

Maybe you could take out the fixed portion of the background.

I’ve taken out the fixed and it’s now gone back to how it was original, it just still won’t stretch downwards.

Could it related to the sidebar at all? This is the sidebar code;

<div id=”sidebar”>
<div id=”log_res”>
<!– spanner –>
<div id=”log”>
</div>
</div>
<h6>Carr Grange Joinery</h6>
<address>Station Yard</address>
<address>Station Rd</address>
<address>Bawtry, Doncaster</address>
<address>South Yorkshire</address>
<address>DN10 6QD</address>

<h6>Telephone</h6>
<address>01302 719474</address>

<h6>Fax</h6>
<address>01302 710368</address>

<h6>Email</h6>
<address>[email protected]</address>
<address>[email protected]</address>
</div>

It might have more to do with your footer information than anything since you have it separated out with <p> tags. If it was classed in a <div id=”footer”>, then your paging might work.

You’d have to add some CSS for the footer though.

Are you using
<?php get_sidebar(); ?>
&
<?php get_footer(); ?>
?

That might help but it would involve some CSS & HTML work.

Footer Code:
<br class=”clear” />
<p class=”footer left”>Copyright © 2008 Carr Grange Joinery Limited. All Rights Reserved.
Co. Reg. No. 4927212 | VAT Reg. No. 457 5215 39</p>
<p class=”footer right”>Designed by Onvo.co.uk</p>

</div>

</body>
</html>

Index:
<?php get_sidebar(); ?>

<?php get_footer(); ?>

Do you have your footer information in a footer.php file? And sidebar information in sidebar.php?

If so, then I’ll admit I’m getting kind of confused on why the content area isn’t stretching to fit.

The only thing I can think of is that a mixture of the CSS and the HTML is preventing the stretch.

There is absolute positioning in the footer paragraphs:

p.left {
    position: absolute;
}

p.right {
    position: absolute;
    right: 0px;
}

This is a common layout and it shouldn’t be so problematic. (And nice design, too, BTW, I meant to mention earlier.)

kohaku: Yes I do, both the footer and sidebar info is in the relevant section.

jonimueller: Thanks, I designed it i’m just adding some content for the client but can’t get rid of the problem.

The style.css contains the following for the footer;

/* =Footer */

p.footer {
clear: both;
font-size: 1.2em;
color: #ffffff;
margin: 15px 0px 0px 0px;
padding-bottom: 30px;
}

p.left {
position: absolute;
}

p.right {
position: absolute;
right: 0px;
}

p.footer a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

Thanks for the help so far!

You could use a <div> for the footer. That might help.

But I did notice that you have:

#wrapper {
    position: relative;
    left: 50%;
    margin: 0px 0px 0px -398px;
    width: 808px;
    border: 1px solid #4e2a15;
    background: #eee1d4 url(images/wrapper-bg.gif) repeat-y;
}

I think your margin of 0 0 0 -398 might be causing the issue. Though that’s for the left, which doesn’t make a whole lot of sense to me cause that would bring the layout way to the left.

Thanks for all the help, this has now been fixed.

The coder accidentally added “position: absolute” to the #content.

I don’t know why, but the facilities page actually makes the entire content jump to the left a bit, as compared with the other pages (in firefox, but not in IE7).

it’s a little distracting.

also, the background image has a feint line at the join… I’m guessing, but this usually happens when you resize an image in photoshop (or whatever) and the image hasn’t been flattened. The antialiasing around the outsides of the layer results in a small transparency issue.

given the attention to detail in the rest of the site, and the very easy fix, I figured I’d mention it.

you can get rid of it easily enough by duplicating the layer upon itself once or twice before saving again – that’ll just bring up any transparent edges up to 100% opacity.

while you’re at it, do consider compressing the background a little more (maybe save-for-web) and see if you can bring down the file size a little. It’s not scarily huge, but it does take a while to load the first time around, which impacts on the first impression.

Other than those easily fixable tiny little cosmetic details, it’s a very nice design.

I’m sure you’re going to change this, but just in case it’s slipped your mind…

The logo links to a page that doesn’t exist… and the polaroids (for lack of a better term) don’t link anywhere. I don’t know where you were intending to link those, but I think since they look like photos it would be cool for them to link to the gallery page.

how’s all that for feedback you didn’t want? ??

Cheers.