Strange behavior in IE with background-image.

So weird! This is the way I'm using the code:

<div class="passage-box"> 
<div class="passage-head">*The background image is here*</div>
<div class="passage-body"></div>
</div>

Now the second strange thing I'm running into is... if I put a second set right underneath it, the background has NO problem showing up!

So I tried putting empty Div's along the top of all the columns and all the images ended up showing up! Does that mean I have an open Div somewhere? I don't see any errors except for that background image not showing up.

This is driving me insane!
I don't think this is a coding problem at all. STUPID IE ARGHHHH.

If I choose to preview in browser from Dreamweaver, the header background bar will show up. If I choose to open the file directly with IE, it won't show. After hitting F5 a couple of times, it may partially show portions of it.

CRAP I SAY.

I just realized this browser is version 5.0, I checked it in 6.0 and it's fine when I place an empty DIV on top of any of the columns.

That's some interesting nesting you got happening there!

Originally I had just one DIV, and I placed the background image in the top left and had it repeat in the X direction. But I wasn't getting enough control over the text that as in that general area, so I ended up splitting the two up and placing a container div around it...

I still consider myself a noob... I suppose this method is no good?

Okay so in summary, an image used as a background for a portion of a div (repeating on the x-axis) has problems showing up in IE. It shows up fine in Firefox, but in IE5 it refuses to show up at all and sometimes portions of the border of the div doesn't show up as well. In IE6 if I place an empty DIV above it, it'll show up.

I've used a background image before in a DIV and it showed up fine in IE, but this is the first time I'm using one and repeating it on the x-axis.

I've seen alot of strange things happening with IE and floated DIV's. Once you start floating stuff, IE gets all whacky with the backgrounds. The way I usually fix this is by defining position: relative here and there. You dont have to go crazy with it, but just experiment. I'm not exactly sure why it happens and its really stupid. But position: relative seems to fix it for me... give it a try.

POSITION:RELATIVE on a few key elements is in fact what will fix the problem. Here's how implemented the fix in IE6. Also, I'm using the XHTML 1.0 transitional doctype to make up for IE's horrible boxmodel.

CSS:

.content_box_01 { 
	margin-bottom:10px; 
	 
	border:5px solid #EEEEEE;  
	background-color:#FFFFFF;  
	background-image:url(../_images/pat_diag_right_EEEEEE.gif); 
	 
	position:relative;  /* HERE */ 
} 
.content_box_01 h1 { 
	background : url(null) fixed no-repeat; 
	background-color:#EEEEEE; 
	padding:5px; 
	margin:0; 
	color:#000000; 
} 
.content_box_01 h2 { 
	background : url(null) fixed no-repeat; 
	background-color:#E0E0E0; 
	padding:5px; 
	margin:0; 
	 
	font-size:12px; 
	color:#000000; 
} 
.content_box_01 .h_group { 
	border-bottom:1px solid #CCCCCC; 
} 
.content_box_01 .h_item { 
	float:left; 
	padding:5px; 
	 
	position:relative;  /* HERE */ 
} 

<div class="content_box_01"> 
	<h1>Facility_Name</h1> 
	<h2>MM/DD/YYYY</h2> 
	<div class="h_group"> 
		<div class="h_item">00:00 AM</div> 
		<div class="h_item"><a href="#"><b>Course_Name</b></a></div> 
		<div class="h_item">#Room_Description#</div> 
		<div style="clear:both; "></div> 
	</div> 
</div> 

I had this problem. I tried to style a heading tag, with a border and background image. It worked fine in FF, but not in IE. Adding position: relative to the heading code fixed it right up.

Nothing really new to add, just confirming that I had the same trippy issue with IE6 and background colours (and images) with nested divs and floating divs. Drove me nuts but adding position : relative to the top div seemed to fix the problem.