10 replies [Last post]
dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

background-image: url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;

also tried:

background: url(images/image2.jpg) repeat-x top;

I'm repeating a 1 pixel wide and 15 pixel high image along the X-axis for a header image.

In FireFox it works just fine, but in IE, the image doesn't appear unless I highlight the text that happens to sit on top of it. Then bits and pieces of that image appears underneath the portions I highlight. In addition if I scroll so that it goes off the screen and then back, portions of it will show up.

Does this have anything to do with the fact Div's can't be smaller than 19pixels in height when there is no content in there? It shouldn't be right? I have text in the Div.

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

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.

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Strange behavior in IE with background-image.

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.

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Strange behavior in IE with background-image.

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.

"What I had, I gave today. What I saved, I lost forever."

Wranga
Offline
Regular
Last seen: 13 years 38 weeks ago
Joined: 2004-11-21
Posts: 22
Points: 0

Strange behavior in IE with background-image.

dcdomain wrote:
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>

That's some interesting nesting you got happening there!

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Strange behavior in IE with background-image.

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?

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 19 years 30 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Strange behavior in IE with background-image.

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.

"What I had, I gave today. What I saved, I lost forever."

i8ramin
i8ramin's picture
Offline
Regular
Glen Cove, NY
Last seen: 18 years 9 weeks ago
Glen Cove, NY
Joined: 2004-11-24
Posts: 49
Points: 0

Strange behavior in IE with background-image.

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.

killroger
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2005-02-02
Posts: 1
Points: 0

Thanks! This is how I did it.

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

HTML:
<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> 


i8ramin wrote:
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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Strange behavior in IE with background-image.

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.

Verschwindende wrote:
  • CSS doesn't make pies

HiRAEdd
Offline
newbie
Brisbane, Australia
Last seen: 17 years 48 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2005-02-24
Posts: 6
Points: 0

Strange behavior in IE with background-image.

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.