CSS - Background Color Doesn't Show In Webkit-based Browsers

Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at:
67.207.72.2/test_styles.htm (forum rules won't let me include this as a url)

The css file for this page is at:
67.207.72.2/css/test_styles.css

My issue is that the right column stops short- I'd like the background color to continue down the length of the page.

To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color.

IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change.

I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked.

Can anyone point me in the right direction? Thanks for your time.

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

Hi everyone...new here and I hope you can help! Thanks is advance!

I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site:

romanceplaybook
I can't post the entire URL because I'm a new registrant. But just put dot com at the end.

Not that the page background is white. It should be repeating the image bkgd.jpg

Here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Hey everyone,

I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7.
Code:

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <title></title>
   <style type="text/css">/* <![CDATA[ */
/* globals */
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #0E1211;
 color: #FFFFFF;
 font-family: tahoma, verdana, arial;
 font-size: 1em;
 background-image: url( background1.gif );
 background-repeat: no-repeat;
}
a img {
 border: 0;
}
a, a:link, a:visited, a:hover, a:visited {
 color: #EC5568;
 text-decoration: none;
}
a:focus {
 outline: none;
}
a:hover {
 text-decoration: none;
}
#container {
 padding: 10px;
}
#menu {
 float: left;
 width: 20%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: center;
}
#menu li {
 display: block;
 line-height: 200%;
 list-style-type: none;
}
#menu a {
 padding: 5px;
 padding-right: 80px;
 padding-left: 80px;
 background-color: #333333;
}
#menu a:hover {
 background-color: #000000;
}
#menu h2 {
 text-align: left;
 padding-left: 15px;
 font-size: 16px;
}
#main {
 margin-left: 1%;
 padding: 1%;
 float: right;
 width: 77%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: justify;
}
	/* ]]> */</style>
  </head>
  <body>
   <div id="container">
    <div id="menu">
     <h2>asdf</h2>
     <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
     </ul>
    </div>
    <div id="main">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor.

Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris. 
    </div>
   </div>
  </body>
 </html>

Screen shot for FF.
Screen shot for IE7.

Any ideas on why this is happening? IE has been going weird when ever I use background images

I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF.

Can someone please give me a clue what is wrong.

I have searched all the CSS books and the internet but I cannot find an answer.

Thanks in advance.

The URL is http://www.childrens-stories.me.uk/