[oneeyedpauly]

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?

[oneeyedpauly]

oneeyedpauly, on Apr 8 2009, 13:30, said:

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...

[n0xx]

#content-middle is inside in #container yes ?
so why :

#content-middle {
width: 1000px; ?

and

#container {
width: 840px;

??

[oneeyedpauly]

n0xx, on Apr 8 2009, 14:08, said:

#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.retroedge...tsite/index.php

[oneeyedpauly]

n0xx, on Apr 8 2009, 14:08, said:

#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.

[n0xx]

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 )

[oneeyedpauly]

n0xx, on Apr 8 2009, 14:34, said:

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

[n0xx]

no problem m8.