Ok, this is driving me insane now....

 

I fixed some of the CSS issues from my previous post yesterday, however I now have a new set of issues.

Primarily, my background has disappeared, even though I have a background assigned to both divs...like so...

 

#content-middle {

width: 1000px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

#container {

width: 840px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

 

I'm guessing something in my code is blocking the repeated background image, but I can't for the life of me work out why, anyone have any suggestions?

Ok, this is driving me insane now....

 

I fixed some of the CSS issues from my previous post yesterday, however I now have a new set of issues.

Primarily, my background has disappeared, even though I have a background assigned to both divs...like so...

 

#content-middle {

width: 1000px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

#container {

width: 840px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

 

I'm guessing something in my code is blocking the repeated background image, but I can't for the life of me work out why, anyone have any suggestions?

 

I've just checked IE7 and the background is displaying disjointed for the following:

 

#container {

width: 840px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

 

So I've removed it....still blank for content-middle div though...

#content-middle is inside in #container yes ?

so why :

 

#content-middle {

width: 1000px; ?

 

and

 

#container {

width: 840px;

 

??

#content-middle is inside in #container yes ?

so why :

 

#content-middle {

width: 1000px; ?

 

and

 

#container {

width: 840px;

 

??

 

Yes, quite right...I clearly got that completly wrong..oops I have figured out the problem now, but not how to solve it. It is to do with the markup....my css now reads, as I think it should.

 

#content-middle {

width: 1000px;

margin: auto;

background-image: url(../images/content-middle.jpg);

background-repeat: repeat-y;

}

#container {

width: 840px;

margin: auto;

}

 

However if I move the div and place it after the footer I get the background, which continues on past the footer div. That all makes sense, however the div should be like so surely?

 

<div id="content-top"></div>

<div id="content-middle">

<div id="container">

<div id="container-left">

{CONTENT}

</div>

<div id="container-right">

<h1>Portfolio</h1>.....

</div>

</div>

</div> // when i move this div to the end of this code I get (almost) the desired effect) //

<div id="content-footer">

<div id="footer-box">

Web design and technology by <a href="http://www.retroedgewebdesign.co.uk/" target="_blank">Retro Edge Web Design<br />

</a>Vaild <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

</div>

</div>

 

and this is what I get.... http://www.retroedgewebdesign.com/testsite/index.php

#content-middle is inside in #container yes ?

so why :

 

#content-middle {

width: 1000px; ?

 

and

 

#container {

width: 840px;

 

??

 

 

sorry I'm totally confusing things here, I have three divs named content-top, content-middle and content-footer, then the container is in the content-middle div with two further container divs for the two columns.

maybe try to create something like this :

 

<div id="container">

<div id="content-top"></div>

<div id="content-middle">

<div id="container-left">{CONTENT IN CONTAINER-LEFT}</div>

<div id="container-right">{CONTENT IN CONTAINER-RIGHT}</div>

</div> //end of content-middle

<div id="footer">

Web design and technology by <a href="http://www.retroedgewebdesign.co.uk/" target="_blank">Retro Edge Web Design<br />

</a>Vaild <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

</div> //end of footer div

</div> // end of container div

 

and to content-top div add this top part of content picture

 

to the content-middle add 1px height and 100% width middle part of content picture and in css add

background-repeat: repeat-y;

height:auto;

width:xxx px;

 

and to the footer add bottom part of content picture :] and add to css

clear:both;

 

that shoud fix your problem (i think )

maybe try to create something like this :

 

<div id="container">

<div id="content-top"></div>

<div id="content-middle">

<div id="container-left">{CONTENT IN CONTAINER-LEFT}</div>

<div id="container-right">{CONTENT IN CONTAINER-RIGHT}</div>

</div> //end of content-middle

<div id="footer">

Web design and technology by <a href="http://www.retroedgewebdesign.co.uk/" target="_blank">Retro Edge Web Design<br />

</a>Vaild <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

</div> //end of footer div

</div> // end of container div

 

and to content-top div add this top part of content picture

 

to the content-middle add 1px height and 100% width middle part of content picture and in css add

background-repeat: repeat-y;

height:auto;

width:xxx px;

 

and to the footer add bottom part of content picture :] and add to css

clear:both;

 

that shoud fix your problem (i think )

 

 

Woo hoo, that it got it sorted... you are a legend, thanks for your help

no problem m8.