www.webdeveloper.com
Results 1 to 13 of 13

Thread: background not showing under divs

  1. #1
    Join Date
    Jan 2006
    Posts
    57

    background not showing under divs

    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
    Last edited by smallfish; 03-13-2006 at 09:54 AM.

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Fixing these errors might help: http://validator.w3.org/check?verbos...m%2Ftest.shtml

    KDLA

  3. #3
    Join Date
    Jan 2006
    Posts
    57
    KDLA,
    done. i should have done that first, but my problem is still present. any other ideas?

    thx,
    grant

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    Code:
    #container {
    	width:768px;height:400px;
    ...

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  6. #6
    Join Date
    Jan 2006
    Posts
    57
    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.

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  8. #8
    Join Date
    Jan 2006
    Posts
    57
    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

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by smallfish
    <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; ?

  10. #10
    Join Date
    Jan 2006
    Posts
    57
    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.

  11. #11
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    I think it's an IE fluke

    Quote Originally Posted by 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.
    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....
    Last edited by WebJoel; 03-13-2006 at 08:02 PM.

  12. #12
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    HTML Code:
    <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>

  13. #13
    Join Date
    Jan 2006
    Posts
    57
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles