can’t get a background pattern to appear in my css

• 

  retrodc · Member · Apr 2, 2007 at 10:05 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  I’m trying to get a background pattern to appear in a gap at the top between the main content and side column. you can see the gap here. http://retrodc.wordpress.com/

  Here’s my css.
  any ideas where I missed it?

  #header {
  font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
  text-align:left;
  width:700px;
  height:200px;
  margin:0;
  }

  body {
  font-size:70%;
  font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
  background-color:#f8e8c4;
  background-image:url(‘http://www.retrodc.com/red.gif’);
  background-repeat:repeat;
  color:#000000;
  text-align:left;
  margin:0;
  padding:0;
  }

  img.noborder {
  border:0;
  margin:0;
  padding:0;
  }

  #header h1 {
  display:none;
  }

  #header .description {
  display:none;
  }

  #page {
  background-color:#F8E8C4;
  width:700px;
  margin:0 auto;
  padding:0;
  }

  #content {
  float:left;
  background-color:#F8E8C4;
  background-image:url(‘http://www.retrodc.com/bg.jpg’);
  background-repeat:repeat-x;
  width:450px;
  overflow:hidden;
  margin:0;
  padding:10px 0 0 25px;
  }

  #sidebar {
  width:170px;
  background-color:#F8E8C4;
  background-image:url(‘http://www.retrodc.com/bg.jpg’);
  background-repeat:repeat-x;
  margin:0 0 0 500px;
  padding:5px 0 20px 25px;
  }

  #footer {
  text-align:right;
  clear:both;
  height:50px;
  margin:0;
  padding:20px 15px 0 0;
  }

  a {
  color:#b33925;
  text-decoration:none;
  }

  a:hover {
  color:#000000;
  text-decoration:none;
  }

  h1,h2,h3 {
  font-family:’Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
  font-weight:bold;
  font-size:1.7em;
  }

  h2.pagetitle {
  text-align:right;
  border-bottom:1px solid #343A54;
  color:#000000;
  margin-top:0;
  padding-bottom:5px;
  margin-bottom:30px;
  }

  img.lefth2img {
  margin:0;
  padding:0 5px 0 0;
  }

  img.righth2img {
  margin:0 0 -12px;
  padding:0;
  }

  p img {
  margin:0 5px;
  }

  .wp-smiley {
  width:15px;
  height:15px;
  }

  #sidebar h2 {
  color:#000000;
  font-family:’Lucida Grande’, Verdana, Sans-Serif;
  }

  .post h2 {
  display:inline;
  padding-bottom:5px;
  margin-bottom:5px;
  }

  .post small {
  display:block;
  }

  .post h3 {
  font-size:1.5em;
  margin:15px 0 0;
  padding:0;
  }

  .post {
  font-size:1.1em;
  line-height:1.4em;
  text-align:justify;
  }

  .postmetadata {
  text-align:right;
  padding-bottom:20px;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid #454C67;
  clear:both;
  }

  blockquote {
  padding-left:15px;
  border-left:4px solid #454C67;
  margin:15px 30px 0 0;
  }

  blockquote cite {
  display:block;
  margin:5px 0 0;
  }

  code {
  display:block;
  border:1px solid black;
  font:1.1em ‘Courier New’, Courier, Fixed;
  background-color:#eeeeee;
  color:black;
  margin:5px;
  padding:5px;
  }

  .navigation {
  margin-bottom:15px;
  }

  #sidebar ul ul li:before {
  content:”0BB 020″;
  }

  #sidebar ul,#sidebar ul ol {
  margin:0;
  padding:0;
  }

  #sidebar ul li {
  list-style-type:none;
  list-style-image:none;
  margin-bottom:15px;
  }

  #sidebar ul p,#sidebar ul select {
  margin:5px 0 8px;
  }

  #sidebar ul ul,#sidebar ul ol {
  margin:5px 0 0 10px;
  }

  #sidebar ul ul ul,#sidebar ul ol {
  margin:0 0 0 10px;
  }

  ol li,#sidebar ul ol li {
  list-style:decimal outside;
  }

  #sidebar ul ul li,#sidebar ul ol li {
  margin:3px 0 0;
  padding:0;
  }

  #searchform {
  text-align:left;
  margin:auto 0;
  padding:5px 3px;
  }

  form#searchform input:focus {
  border:2px solid #963C22;
  margin:1px;
  }

  #searchform input {
  font:1em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
  border:1px solid #000000;
  margin:2px;
  }

  #searchform #s {
  width:115px;
  padding:2px;
  }

  #searchsubmit {
  display:none;
  }

  #respond {
  margin-top:30px;
  }

  #commentform input {
  width:170px;
  margin:5px 5px 1px 0;
  padding:2px;
  }

  #commentform textarea {
  width:100%;
  padding:2px;
  }

  #commentform #submit {
  float:right;
  margin:0;
  }

  #commentform p {
  margin:5px 0;
  }

  .alt {
  background-color:#F8E8C4;
  border-top:1px solid #136284;
  border-bottom:1px solid #136284;
  }

  .commentlist {
  text-align:justify;
  margin:0 0 20px;
  padding:0;
  }

  .commentlist li {
  list-style:none;
  margin:5px 0 3px;
  padding:5px 10px 3px;
  }

  .commentlist li .avatar {
  float:right;
  border:1px solid #ddd;
  padding:2px;
  }

  .commentlist p {
  margin:0 0 15px;
  }

  .nocomments {
  text-align:center;
  margin:0;
  padding:0;
  }

  .commentmetadata {
  display:block;
  margin:0;
  }

  .quote {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#565637;
  font-size:12px;
  font-weight:bold;
  }

  .category {
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  color:#343A54;
  }

• 

  sunburntkamel · Member · Apr 2, 2007 at 10:23 pm

  • Copy link

  i see you’re putting the background image image in both #content and #sidebar. right now, #content isn’t filling the whole #page div. so you can do
  #content { width: 475px; }

  and that will remove the little gap.

• 

  retrodc · Member · Apr 3, 2007 at 12:42 am

  • Copy link

  YES! I can’t believe I missed that. css can be so goofy. thanks