SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image won't display in IE6

    Does anyone know why my 3 column background image won't display in IE6?

    http://www.jindesigns.com/testcss/website

    I've put the image in a div:

    #main{
    margin: 5px 0 5px 0;
    top: 0;
    left: 0;
    padding: 0px;
    background: url(images/background_3col.gif) repeat-y top left;

    }
    Here's a link to the styles: www.jindesigns.com/testcss/website/styles_jincss
    Seems to be fine in other browsers and IE7. Any help much appreciated.

    Thanks.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm curious, why did you specify the top and left properties on #main?

    Try giving hasLayout to #main. To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
    http://www.satzansatz.de/cssd/onhavinglayout.html
    On Having "Layout"
    "HasLayout" Overview
    A TripSwitch? - set hasLayout to true without a dimension
    IE/Win: inline-block and hasLayout
    Clarification of inline-block and hasLayout
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why I specified top and left. I think it was something I was recommended to do in the last website I put together. Thanks for the links, I have had a read of these but am still not sure which fix I should use for this problem. This problem occurred when I messed around with the layout of the page. When the page flowed like this Left | Right | Content - using absolute positioning, the background image was fine. When I swapped the flow of the document to Left | Content | Right - the background image disappeared in IE6.

    Still not sure how to fix this so would be very grateful for any help.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like a float clearing problem. Adding display: inline-block to #main sorts it out. You should only let IE see that though so either use an IE-only hack or conditional comments.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case, just give #main a width. That way you can avoid using any hacks or conditional comments.

    This is how I would write the rule for it. (This would replace the existing one.)
    Code:
    #main {
      width: 740px;
      margin: 5px 0;
      padding: 0;
      background: url(images/background_3col.gif) repeat-y top left;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Manchester, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it's as simple as just specifying the width. I've tried it and it's done the trick. Will try to remember that for next time. Thank you very much for helping me with this.


Bookmarks

Posting Permissions

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