No replies
brumster
brumster's picture
Offline
newbie
UK
Last seen: 13 years 28 weeks ago
UK
Timezone: GMT+1
Joined: 2009-07-22
Posts: 2
Points: 0

I'm trying to get the backgrounds to tile down as far as the centre column.
I've tried everything I can think of and checked everyone else's 'solutions'.
Can anyone shed any light on the problem?

Here's the HTML (default.htm):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing</title>
<link rel="stylesheet" href="common/default.css" media="screen" />
</head>
 
<body>
 
<div id="header">
 <div class="logo"><img src="common/header.png" height="100" width="210" /></div>
</div>
 
<div id="navigation">
 <ul>
  <li class="open"><a href="meh.html">Meh</a>
  <li><a href="bah.html">Bah</a>
  <li><a href="grr.html">Grr</a>
  <li><a href="pff.html">Pff</a></li>
 </ul>
</div>
 
<div id="container">
 
 <div class="blurb">
  <div class="content">
   <div class="tp"></div>
   <h1>Heading</h1>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
   <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  </div>
  <div class="bt">
   <div></div>
  </div>
 </div>
 
 <div class="left column">
 <div id="leftcol"></div>
 </div>
 <div class="right column">
 <div id="rightcol"></div>
 </div>
</div>
 
</body>
</html>

Here's the CSS (default.css):

body {
 background-color:#363636;
 margin:0px;
}
 
#header {
 z-index:10;
 background:url(headbg.png);
 background-repeat:repeat-x;
 position:relative;
 margin:0px;
 height:100px;
 width:100%;
}
 
#header .logo {
 width:800px;
 margin:0px auto;
 border:none;
}
 
#navigation {
 z-index:10;
 position:relative;
 margin:0px;
 background:url(menubg.png);
 background-repeat:repeat-x;
 height:30px;
 width:100%;
}
 
#navigation ul {
 margin-top:0px;
 text-align:center;
}
 
#navigation li {
 display:inline;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:x-large;
 text-transform:uppercase;
 padding:0px 1.0em;
 border-left-width: thin;
 border-left-style: solid;
 border-left-color: #CCCCCC;
}
 
#navigation .open {
 border:none;
}
 
#navigation a {
 text-decoration:none;
}
 
#navigation a:link,a:visited {
 color:#CCCCCC;
}
 
#navigation a:active {
 color:#FFFFFF;
}
 
#navigation a:hover {
 color:#FF0000;
}
 
#container {
 width:800px;
 margin:0px auto;
}
 
.column {
 width:50%;
 height:100%;
 position:absolute;
 top:0px;
}
 
.left {
 left:0px;
}
 
.right {
 right:0px;
}
 
#leftcol {
 margin-right:400px;
 height:100%;
 background-color:#000000;
 background-position:right;
 background-image:url(sideleft.jpg);
 background-repeat:repeat-y;
 z-index:5;
}
 
#rightcol {
 margin-left:399px;
 height:100%;
 background-color:#000000;
 background-position:left;
 background-image:url(siderite.jpg);
 background-repeat:repeat-y;
 z-index:5;
}
 
.blurb {
 z-index:10;
 color:#FFFFFF;
 position:relative;
 margin:0px auto;
 min-width:8em;
 max-width:800px;
 margin-left:12px;
 margin-bottom:0.5em;
}
 
.blurb a:link, .shine a:visited {
 color:#FFFFFF;
 text-decoration:underline;
}
 
.blurb a:active {
 color:#FF0000;
 text-decoration:none;
}
 
.blurb a:hover {
 color:#FFFFFF;
 text-decoration:none;
}
 
.blurb .content,
.blurb .tp,
.blurb .bt,
.blurb .bt div {
 background:transparent url(879x1589.png) no-repeat top right;
 _background-image:url(879x1589.gif);
}
 
.blurb .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.blurb .tp {
 position:absolute;
 left:0px;
 top:0px;
 width:12px;
 margin-left:-12px;
 height:100%;
 _height:1600px; /* IE 6 */
 background-position:top left;
}
 
.blurb .bt {
 position:relative;
 width:100%;
}
 
.blurb .bt,
.blurb .bt div {
 height:30px;
 font-size:1px;
}
 
.blurb .bt {
 background-position:bottom right;
}
 
.blurb .bt div {
 position:relative;
 width:12px;
 margin-left:-12px;
 background-position:bottom left;
}
 
.blurb .hd,
.blurb .bd,
.blurb .ft {
 position:relative;
}
 
.blurb .wrapper {
 position:static;
 max-height:1500px;
 overflow:auto;
}
 
.blurb h1 {
 margin:0px;
 padding:1.0em 0px 0.5em 0.5em;
 color:#CCCCCC;
 font-size:large;
 text-decoration:underline;
}
 
.blurb p {
 margin:0px;
 padding:0.5em 0px 0.5em 0px;
 color:#FFFFFF;
}
 
.blurb ul {
 margin:0px;
 padding-top:1.0em;
 padding-bottom:0.5em;
 font-style:italic;
}
 
.blurb ul li {
 margin:0px;
 font-style:normal;
 line-height:1.5em;
}