SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    notts
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background images not showing in Opera and Firefox

    #container {
    width:780px;
    background: White url(../images/generic/bgborder.gif) repeat-y top left;
    margin:0 auto;

    This background only appears intermitently down my page, it's fine in IE but won't show in Opera or Firefox.

    See here the background border only partly shows down the page:

    test.jpg this is what is happening, this is what I want to happen....test2.jpg

    It has something to do with the fact that some of the divs contained are using float left to control the position. If I take the float off the style sheet everything is ok..
    Last edited by dubs; Oct 16, 2007 at 09:22.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without seeing the markup and the full CSS, I'm willing to bet that your problem is that you're not enclosing your floats.

    Floated elements are taken out of the document flow. If all children of a container are floated, there is nothing left to take up space. The container collapses to zero height. Any background specified for the container will be invisible, since it's 0px high.

    Add a cleared element after your floats, or use one of the float-clearing methods like overflow:hidden or floating the container, too.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    notts
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Without seeing the markup and the full CSS, I'm willing to bet that your problem is that you're not enclosing your floats.

    Floated elements are taken out of the document flow. If all children of a container are floated, there is nothing left to take up space. The container collapses to zero height. Any background specified for the container will be invisible, since it's 0px high.

    Add a cleared element after your floats, or use one of the float-clearing methods like overflow:hidden or floating the container, too.
    You're bang on, pretty new to using CSS in this way. I'm very old schools....tables and external css sheets. Where's the best place to learn more....

    Thankyou!

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd personally go with overflow: hidden; here myself, but that's just me.

  5. #5
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You, you, you. It's always about you, Dan.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You calling me Marsha Brady?


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
  •