Background showing up in FF but not in IE

Posted on 2012-09-05
Last Modified: 2012-09-06
Hello all experts.

I may have been looking at this code for too long, but I cannot seem to figure out why the background image is showing up fine in FF but not in IE.

Tha background image is attached as well as the HTML and CSS.

The background image consists of white color on the left (for the left column) and the brown color on the right (for the right column).

Any help will be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
  <link href="css/css_ec.css" rel="stylesheet" type="text/css">


   <!-- Begin Wrapper -->
   <div id="wrapper">
         <!-- Begin container Columns -->
		 <div id="container">
		 <img src="images/arts-dinning-.jpg">
		       <!-- Begin Left Column -->
		       <div id="leftcolumn">
			   <div class="ColumnHeaders">Groton - A Great Place to Live</div>
<p>In choosing where to live in Groton, there's a lot to pick from. Historic village settings, new and mature single family housing developments, condos and apartments; beachfront communities, areas with city amenities, near public transportation or out in the country we have a neighborhood for you. Shop in friendly stores, relax in one of our great restaurants and try some of our delicious ice cream. Getting around is easy, our system of roads will get you where you want to go, all without the hassle of city traffic. Bike trails are everywhere and more are being developed. Enjoy concerts year around, run in a 10k, educate your children for the challenges of the 21st century, take adult learning courses, walk on scenic trails and by-ways and when the spirit moves, take off for a day trip to New York City, Hartford, Providence or Boston.</p>

<p>For more on the Groton community, visit the Greater Mystic Chamber of Commerce website.</p>

<p>The Groton Lifestyle offers:
<li><a href="">A Vibrant History and a Great Future</a></li>
<li><a href="">Recreation and Leisure</a></li>
<li><a href="">Outstanding Educational Opportunities</a></li>
<li><a href="">Arts, Dining and Entertainment</a></li>

			   <div class="clear"></div>
		       <!-- End Left Column -->
		       <!-- Begin Right Column -->
		       <div id="rightcolumn">
		             <p>a 10k, educate your children for the challenges of the 21st century, take adult learning courses, walk on scenic trails and by-ways and when the spirit moves, take off for a day trip to New York City, Hartford, Providence or Boston.</p>

				<div class="clear"></div>
		       <!-- End Right Column -->
         <!-- End container Columns --> 
   <!-- End Wrapper -->


Open in new window

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, ins, strong, ol, ul, li,
fieldset, form, label, legend,
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;

* { padding: 0; margin: 0; }

html {

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
#wrapper { 
 margin: 0 auto;
 width: 936px;
#container {
 background: url(images/content_bg.gif);
 margin: 10px 0px;
 overflow: auto; /* Paul O Brien Fix for IE */
 width: 100%;
#rightcolumn { 
 display: inline;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 185px;
 float: right;
#leftcolumn { 
 float: left;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 683px;
 display: inline;
 position: relative;
#footer { 
 width: 902px;
 clear: both;
 color: #333;
 background: #ABBEBE;
 margin: 0px 0px 10px 0px;
 padding: 10px;
.clear { clear: both; background: none; }

.ColumnHeaders {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	/*font-variant: small-caps;*/
	color: #FFFFFF;
	height: auto;
	width: auto;
	background: #000;
  text-align: center;
  padding: 5px;

/*Economic Development Page Rotating header CSS*/
#rotating-item-wrapper {
    position: relative;
    width: 936px;
    height: 315px;
.rotating-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;

Open in new window

Question by:driven_13
    LVL 5

    Expert Comment

    Your css is using content_bg.gif and your actual file name is content-bg.gif. Maybe this is the cause of your problem?

    Author Comment

    Good eyes but I believe that is a "experts exchange" issue.  They converted my "underscore" to a "dash".


    All of this is showing up fine in FF.

    LVL 5

    Accepted Solution

    is the images folder and css folder on the same level or is the images folder located inside the css folder?

    because when I setup your code, I put the images folder and css folder on same level and none of the browsers show the background color because they all point to css/images/content_bg.gif

    I then change your css's background url path to url(../images/content_bg.gif) all the browser show the background color.

    I tested on chrome, FF, IE8 & IE6.

    Author Comment

    You are indeed right sir.

    So, how in the world was it showing up in FF all this time....???

    The "css" and "images" folder is one level down from the root.

    Thanx for catching it.



    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now