?
Solved

Background showing up in FF but not in IE

Posted on 2012-09-05
4
Medium Priority
?
421 Views
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.

--d.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Welcome</title>
  <link href="css/css_ec.css" rel="stylesheet" type="text/css">
</head>

<BODY>

   <!-- 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:
<ul>
<li><a href="http://www.groton-ct.gov/depts/plandev/History.asp">A Vibrant History and a Great Future</a></li>
<li><a href="http://www.groton-ct.gov/depts/plandev/leisure.asp">Recreation and Leisure</a></li>
<li><a href="http://www.groton-ct.gov/depts/plandev/education.asp">Outstanding Educational Opportunities</a></li>
<li><a href="http://www.groton-ct.gov/depts/plandev/arts.asp">Arts, Dining and Entertainment</a></li>
</ul>


		       
			   <div class="clear"></div>
			   
		       </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>
				
		       </div>
		       <!-- End Right Column -->
			   
         </div>	   
         <!-- End container Columns --> 
		 
   </div>
   <!-- End Wrapper -->

</BODY>
</HTML>

Open in new window


CSS:
/* RESET STARTS BELOW */
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;
}
/* RESET ENDS ABOVE */


* { padding: 0; margin: 0; }

html {
	background:#fff;
}

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 www.pmob.co.uk */
 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;
  margin-bottom:10px;
}

/*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

content-bg.gif
0
Comment
Question by:driven_13
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:dnzone88
ID: 38371140
Your css is using content_bg.gif and your actual file name is content-bg.gif. Maybe this is the cause of your problem?
0
 

Author Comment

by:driven_13
ID: 38371146
Good eyes but I believe that is a "experts exchange" issue.  They converted my "underscore" to a "dash".

Weird.

All of this is showing up fine in FF.

--d.
0
 
LVL 5

Accepted Solution

by:
dnzone88 earned 2000 total points
ID: 38371223
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.
0
 

Author Comment

by:driven_13
ID: 38372579
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.

Best,

--d.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

864 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