SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Fdb's Avatar
    Join Date
    Dec 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with this div and background image.

    <div style="background-color: rgb(51, 51, 51); background:url(/images/background.gif); width:100%; height: 210px;">
    </div>
    I want the image, background.gif, to be tiled accross the page, 210px high.

    It works in FF and Opera, but in IE the image does not display unless I add some text to the div as well, and then it only shows for the width of the text.

  2. #2
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sure I will be corrected shortly but I seem to remember something about IE having a buggy interpretation of height and width attributes. Having said that, what I recall is that IE interprets height and width as min-height and min-width respectively. This would suggest that your width and height attributes are being interpreted by IE as their min- equivalents. It may be as simple as placing a non-breaking space (&nbsp into your div to give it some content. IE may well collapse DIV elements that have no content, i.e. only applying min-height/min-width when the DIV contains something.

    Can anyone else verify this?

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    forget the nbsp and add a min-width declaration to your style sheet
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    SitePoint Enthusiast Fdb's Avatar
    Join Date
    Dec 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I add a nbsp, the background image shows only as a tiny strip the width of the space.
    If I make the width 1024px, it shows accross the entire screen, but I do not want to make it a fixed width. I want it to show accross the screen, irrespective of the screen resolution.
    Is there another way to do it?

  5. #5
    SitePoint Enthusiast Fdb's Avatar
    Join Date
    Dec 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shyflower View Post
    add a min-width declaration to your style sheet
    An example?

  6. #6
    SitePoint Addict mmanders's Avatar
    Join Date
    Jul 2006
    Location
    Edinburgh, Scotland
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'oh - I misread the post. I thought the issue was the DIV was shrinking vertically not horizontally. That aside, I thought that IE interpreted width and height attributes as min-width and min-height. If that's the case and it has interpreted the width as a min-width, why is thie width not enforced, resulting in the image not showing completely?

  7. #7
    SitePoint Enthusiast Fdb's Avatar
    Join Date
    Dec 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed it to the following:

    <div
    style="background-color: rgb(51, 51, 51); background-image: url(/images/background.gif); width: 100%; min-width:100%; height: 210px;"></div>
    It is now displaying accross the screen in IE as well.


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
  •