background not showing under divs

[smallfish]

i am working on this site:
http://hank.smallfishserver.com/test.shtml

in IE, it looks right, but in FF some of the background-images are not showing. I have a background-image repeating-y in the CONTAINER/WRAPPER div. I have several DIVs inside of the CONTAINER div. here are the files

.jpg image of page in IE
.jpg image of page in FF (problem)

here's the layout (simplified)

<div id="container" style="background-image:url(img.gif); background-repeat:repeat-y;">
<div id="header"></div>
<div id="nav"></div>
<div id="col_1"></div>
<div id="col_2"></div>
<div id="footer"></div>
</div>


your reward: knowing that you helped out a fellow developer with a massive brain-cramp.

thx,
grant

[KDLA]

Fixing these errors might help: http://validator.w3.org/check?verbos...m%2Ftest.shtml

KDLA

[smallfish]

KDLA,
done. i should have done that first, but my problem is still present. any other ideas?

thx,
grant

[ray326]

Looks like you need to clear the columns in your content area. The div has nothing but floated content so it has no height. Try this and you'll see what I mean.

#container {
	width:768px;height:400px;
...

[toicontien]

For a brief explanation of floated elements, see the "Quick Floated Elements Explanation" link in my signature.

[smallfish]

why is the bkgd-image of the container not showing in the blank areas of the DIVs that are inside of it?

ray, i'd like to give the Container DIV a height, but the content DIV varies in size depending on the page.

[toicontien]

Reading the forum post that I linked to with "Quick Floated Elements Explanation" tells you why and also gives a solution. It's a link in my signature.

[smallfish]

maybe i'm missing something here, but i have read and reread your Floated Elements post and don't see the relationship to this problem.

let's simplify this issue even further:
<div id="container" style="bkgd-img:url(image.gif) repeat-y;">
<div id="nav" style="height:100px; float:left;"></div>
<div id="content" style="height:300px; float:right; clear:right"></div>
</div>

i am not getting one cohesive image repeating down the length of the Container DIV.

if i'm missing your point, please forgive my oversight.

thanks,
grant

[WebJoel]

<div id="container" style="bkgd-img:url(image.gif) repeat-y;">
<div id="nav" style="height:100px; float:left;"></div>
<div id="content" style="height:300px; float:right; clear:right"></div>
</div>
i

Isn't the correct syntax supposed to be:
style="background-image:url(image.gif) repeat-y; ?

[smallfish]

yes, the correct syntax is that. i was just abbreviating for simplicity's sake. here the complete code of my simplified model:
<div id="container" style="background-image:url(image.gif); repeat:repeat-y;">
<div id="nav" style="height:100px; float:left;"></div>
<div id="content" style="height:300px; float:right; clear:right"></div>
</div>

as mentioned before, this code shows the CONTAINER background-image through the NAV and CONTENT divs in Internet Explorer but not in FireFox.

[WebJoel]

yes, the correct syntax is that. i was just abbreviating for simplicity's sake. here the complete code of my simplified model:
<div id="container" style="background-image:url(image.gif); repeat:repeat-y;">
<div id="nav" style="height:100px; float:left;"></div>
<div id="content" style="height:300px; float:right; clear:right"></div>
</div>

as mentioned before, this code shows the CONTAINER background-image through the NAV and CONTENT divs in Internet Explorer but not in FireFox.

Oh okay! I am quite, um, literal. So when I see a mispelled word in someone's example code, I assume that THAT is the problem. Personal shortcoming: I loathe 'AOL shorthand'... you know, "how r u? I am gr8!"
Anyway, I think that IE only allows 'background-image' to be declared on the 'body', whereas compliant browsers (e.g. any non-IE) allow background-image to also be declared upon things like DIV's. There is an example of this here
http://www.meyerweb.com/eric/css/edg...lexspiral/demo That is more of a 'background-attachement:fixed' situation, -but it may be related to what you're experiencing...
This URL's example works beautifully in all/most browsers, notably is the exception of IE of course.

Have you tried taking the style="background-image:url(image.gif); repeat:repeat-y;" off of the DIV and putting it into the STYLE declaration #container {foo}? Oddly enough, I have seen cases where a 'id="this" style="foo:foo-foo"' failed, but adding the style= stuff to the '#this' id worked....

[ray326]

as mentioned before, this code shows the CONTAINER background-image through the NAV and CONTENT divs in Internet Explorer but not in FireFox.

That's because IE incorrectly allows the floated content to expand the containing div. That's why you have to put a "clearing div" below the floated divs before closing out the container.

<div id="container" style="background: #f00 url(image.gif) repeat-y;">
<div id="nav" style="height:100px; float:left; background: #0f0;">&nbsp;</div>
<div id="content" style="height:300px; float:right; clear:right; background: #00f">&nbsp;</div>
<div style="height:1px;font-size:1px;clear:both"></div>

[smallfish]

Ray-
you're the man! this is an issue that has had me:
1. pulling my hair out
2. considering dumping this CSS bull**** and go back to tables (just kidding, i love CSS)
3. contemplating a career change.

it seams also that the last floated DIV cannot have the float:left in the attributes either (if the only element on that level).

thanks for your help,
grant