IE not repeating my background image

[nnhubbard]

I have a background image that is used in my body div that repeats verticly to give me faux columns. It just has the column background color on part of the image, so it appears that the column goes all the way down. BUT, this is not working in IE for some reason. Here is what I am using:

#middleBody {clear:both; background-image: url(/__data/assets/image/0019/8290/middle_bg.gif); background-repeat:repeat-y;}

Strangly this does not work in IE, and I have a suspicion that it thinks there is some white background color somewhere else and is covering up my repeat, but I cannot find any.

Any advice on this?

[dtm32236]

i've found several problems with IE and backgrounds, but i've also found this to always work:

background:#ffffff url(/__data/assets/image/0019/8290/middle_bg.gif) repeat-y center;

it always seems to work when background is used with this shorthand method.

and you can change 'center' to any of the following (maybe more):
top left;
top right;
bottom left;
bottom rigth;

[nnhubbard]

I think I just realized that the problem is because my containing body div has floating elements in it, which makes the div think that it has no height. I know about the <br clear="all" /> trick, but I don't want that break in there! Is there another way around this? clear:both; is not working...

Edit: Fixed this problem, IE problem still remains.

[KDLA]

I'd guess that the problem isn't related to your background, but to some other coding error. ;)
It's hard to tell, though, without seeing the page.

KDLA

[dtm32236]

try:

#middleBody {
display:block;
background:#ffffff url(/__data/assets/image/0019/8290/middle_bg.gif) repeat-y center;

making it display:block; should add height to the div..... maybe. (haven't tested)

[nnhubbard]

Here is a link to my page if anyone is interested in looking:

http://websrv.puc.edu/about-puc/campus-map

Thanks for the help, I will try that last solution.

[nnhubbard]

try:

#middleBody {
display:block;
background:#ffffff url(/__data/assets/image/0019/8290/middle_bg.gif) repeat-y center;

making it display:block; should add height to the div..... maybe. (haven't tested)

This didn't help. KDLA, you might be right, could be a coding error, but I am not seeing it. I am thinking it is just an IE inconsistency, works in every other browser.

[KDLA]

First, you've got a .PNG compatibility problem. IE hates those. I suggest converting them into transparent GIF's.

I'm guessing that this has to do with your floating the items in the #middlebody div. When you float the items, they are "pulled out" of the parent, meaning that the parent does not expand in height as these floated elements expand, because they are now out of the document's flow.

A trick I do to get around this is to put an <hr> after the floated items, set to clear: left and visibility: hidden. This doesn't break up the semantic flow of the document (because it's only denoting a separation of the content from the footer). Also, because the element is not floated, it is considered "content" of the parent div, and thus the div expands.

KDLA

[KDLA]

(A Display: block; setting does nothing. Div's are already block-level elements.;))

[nnhubbard]

First, you've got a .PNG compatibility problem. IE hates those. I suggest converting them into transparent GIF's.

I'm guessing that this has to do with your floating the items in the #middlebody div. When you float the items, they are "pulled out" of the parent, meaning that the parent does not expand in height as these floated elements expand, because they are now out of the document's flow.

A trick I do to get around this is to put an <hr> after the floated items, set to clear: left and visibility: hidden. This doesn't break up the semantic flow of the document (because it's only denoting a separation of the content from the footer). Also, because the element is not floated, it is considered "content" of the parent div, and thus the div expands.

KDLA

Hi KDLA,

Thanks for your advice. I tried your tip about adding <hr> tags, but that only introduce another problem, where my content now falls below my nav, not sure why that is happening. It does however now show the repeating background in IE. I am sure this is happening because my nav div is only 350px high, so the other divs fall under it when the float is cleared...

As for my png's, I have gif files, their transparency is horrible, and I could not get a nice transparent shadow for my site sides without using a png. Maybe I should change back, but it is frustrating that IE 6 functions this way.

[dtm32236]

(A Display: block; setting does nothing. Div's are already block-level elements.)

very true - good point.

[KDLA]

I found where you're using the <hr> twice. You only need to put it right before the closing tag for your middlebody div. What you're trying to do is to place content into the parent div so that it stretches to seemingly enclose the floated divs.
Here is the extra one:

<hr class="fixFloat" />
<!--END SUBS-->


BTW -- Why is this in there?

<br id="clearBr" clear="all" />

I believe that "clear=all" is deprecated.

[nnhubbard]

I found where you're using the <hr> twice. You only need to put it right before the closing tag for your middlebody div. What you're trying to do is to place content into the parent div so that it stretches to seemingly enclose the floated divs.
Here is the extra one:

<hr class="fixFloat" />
<!--END SUBS-->


BTW -- Why is this in there?

<br id="clearBr" clear="all" />

I believe that "clear=all" is deprecated.

Hooray! It worked! I removed the extra <hr>, I had added because I thought I needed to add it to both floats.

I had added the <br id="clearBr" clear="all" /> because essentially does the same thing we just did, but it was not working this time I had used it in the past. I do think that validates though.

Thank you again, I really appreciate your help!

[Major Payne]

I have a background image that is used in my body div that repeats verticly to give me faux columns. It just has the column background color on part of the image, so it appears that the column goes all the way down. BUT, this is not working in IE for some reason. Here is what I am using:

#middleBody {clear:both; background-image: url(/__data/assets/image/0019/8290/middle_bg.gif); background-repeat:repeat-y;}

Strangly this does not work in IE, and I have a suspicion that it thinks there is some white background color somewhere else and is covering up my repeat, but I cannot find any.

Any advice on this?May have missed where you're calling the image out, but this is all I found for the body div: #pagebody_holder {width: 640px; float: left; position: relative;}

#pagebody {width: 578px; min-height:350px; /* Min Height Hack */ height:auto !important; height:350px; padding:10px 20px 20px 40px; float: left; position: relative;}I never saw where your bg image, /__data/assets/image/0019/8290/middle_bg.gif, is called out.

Ron

[nnhubbard]

May have missed where you're calling the image out, but this is all I found for the body div: #pagebody_holder {width: 640px; float: left; position: relative;}

#pagebody {width: 578px; min-height:350px; /* Min Height Hack */ height:auto !important; height:350px; padding:10px 20px 20px 40px; float: left; position: relative;}I never saw where your bg image, /__data/assets/image/0019/8290/middle_bg.gif, is called out.

Ron

It is in a file called subs.css

[Major Payne]

Was going to take a look at image at http://websrv.puc.edu/about-puc/__data/assets/image/0019/8290/middle_bg.gif, but it says, You do not have permission to access Pacific Union College. :p Funny as I can grab all other images.

Ron

[nnhubbard]

Was going to take a look at image at http://websrv.puc.edu/about-puc/__data/assets/image/0019/8290/middle_bg.gif, but it says, . :p Funny as I can grab all other images.

Ron

I was using a relative URL, so the actual URL to the file is:

http://websrv.puc.edu/__data/assets/image/0019/8290/middle_bg.gif

[Major Payne]

Oh, I know that, but your link brings up a blank page.

Ron

[nnhubbard]

Oh, I know that, but your link brings up a blank page.

Ron

It is a 816x1 px image, and most of it is white. So it is there, you just have to look hard.

[Major Payne]

Sorry. Went back later to see and it is there. At my age, guess my eyes are not that quick to catch a one pixel high image. Should have taken the time to look at Firefox's information at the top as it give me all the information which it wouldn't have if image was not there. Guess this means another slow down in my life. :P

Ron